Question

Visualizações

The div structure is -

<div class="parent">
    <div class="left float-start"></div>
    <div class="right float-end overflow-y"></div>
<div>

Now,

For the left child -
- the height should be based on dynamic content
- displayed entirely with no overflow scroll
For the right child -
- height is also based on dynamic content but
- max height should be the height of the left child
- set to overflow-y scroll and so it's never longer than the left child but can be shorter

How do i do this only using css?

Any help would be appreciated!!

about 4 years ago · Juan Pablo Isaza

Responde à pergunta

Answer 1 · 2022-07-01T02:01:05.178Z

@Ashley you can use this css for this problem.

<div class="parent">
    <div class="left float-start"></div>
    <div class="right float-end overflow-y"></div>
<div>

// For equal height of the div CSS:-

.parent {display: flex;}

/***** for mobile view *****/

@media (max-width: 767px) {.parent { flex-wrap: wrap;}}

// this is break the column according to the width of the div