Vertical divs in a parent with max-height-CodePudding

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

CodePudding user response：

Hope this will fix your issue.

HTML

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

CodePudding user response：

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 >
  <div >
    <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 >
    <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>