Vertical divs in a parent with max-height

Issue

So I'm trying to make a box/div with a max-height that contains 2 vertical scrollable lists of items that adjusts their heights depending on the amount of the items while still fitting in the parents' max-height. Example. And if both of them have overflowing items I want both lists to have 50% height. Example 2. Sorry if this sounds a little cryptic and hard to understand, having a hard time trying to describe it.

This is what I currently have.

HTML:

<div class="list-box">
   <div class="list-1">
      <ul>
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>
      </ul>
   </div>
   <div class="list-2">
      <ul>
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>
         <li>item</li>
      </ul>
   </div>
</div>

SASS:

.list-box {
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 15rem);
   
   .list-1,
   .list-2 { 
      height: auto;
      overflow-y: auto;
   }
}

Solution

Hope this will fix your issue.

HTML

<div class="parent-wrap">
    <div class="child-wrap"></div>
    <div class="child-wrap"></div>
<div>

CSS

 .parent-wrap {
    height: 100%;
    border: 1px solid;
    height:600px;
    padding: 3px;
    display: flex;
    flex-direction: column;
    
  }
  
  .child-wrap {
    border: 1px solid red;
    overflow: auto;
  }
  
  .child-wrap:nth-child(1) {
     max-height: 50%; 
  }
  
  .child-wrap:nth-child(2) {
    flex: 1; 
  }

Answered By - Nikhil Parmar