HTML CSS flexible growing lists - html

Question

I'm trying to build a react components, which renders 2 lists. Both lists can dynamically get bigger or smaller.
I've got 100% space vertically. If both lists are big, than every list should take 50% height.
If any list isn't big enough to take the whole 50% height space, than the other one should grow.
I can't find a working solution so far. I think flex-grow and shrink is a good way to do it, but it doesnt work for me.
.container {
display: flex;
flex-direction: column;
flex: 1 1;
overflow-y: hidden;
}
.list_1 {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow-y: auto;
}
.list_2 {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow-y: auto;
}
<div class="container">
<div class="list_1">
<li>Item 1a</li>
<li>Item 1b</li>
<li>Item 1c</li>
</div>
<div classs="list_2">
<li>Item 2a</li>
<li>Item 2b</li>
<li>Item 2c</li>
</div>
</div>
I tried so many thinks from documentations but nothing works..

Answer 1

As you can see in the following snippet, I have given flex: 1 to both .list-1 and .list-2.
So when the second list grow, the first one shrinked.
If both has equal items, both will have 50% width also.
Please check and try updating your code with this solution.
.container {
display: flex;
flex-direction: column;
border: 1px solid blue;
height: 300px;
}
.list_1, .list_2 {
flex: 1;
border: 1px solid #ddd;
}
<div class="container">
<div class="list_1">
<ul>
<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>
</ul>
</div>
</div>