Set the max height of one child div as the height of another child of the same parent div

Question

The div structure is -

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

Now,

1. For the left child -

   • the height should be based on dynamic content
   • displayed entirely with no overflow scroll

2. 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!!

Answer 1

@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