Vertical divs in a parent with max-height - html

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;
}
.child-wrap:nth-child(1) {
max-height: 50%;
}
.child-wrap:nth-child(2) {
flex: 1;
}

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>