具有最大高度的父级中的垂直 div

Question

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;
   }
}

Answer 1

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;
    max-height: 50%;
  }

Answer 2

I think you haven't need to flex.

 /*CSS:*/ * { box-sizing: border-box; }.list-box { height: 500px; border: solid green; }.list-1, .list-2 { overflow: auto; max-height: 50%; }.list-1 { border: solid red; }.list-2 { border: solid blue; }

 <!-- 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> <li>item</li> <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> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> </div>