带滚动条的动态弹性框

Question

I want to create a layout like this example below

1. Parent container have fixed height
2. If just have one child list, the list takes all height of container
3. If have two lists, each list takes enough space for its content. Any list with height > container height - the other list height will show scroll, in case the other list has height > 50% of parent then 2 lists will take 50% height of parent and show scroll

I have tried using flexbox but still have not found any solution

 .container { display: flex; flex-direction: column; height: 500px; }.list1 { border: 1px solid red; overflow-y: scroll; }.list2 { border: 1px solid blue; overflow-y: auto; }.list1 div, .list2 div { padding: 20px; }

 <div class="container"> <div class="list1"> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> </div> <div class="list2"> <div> item1 </div> </div> </div>

Answer 1

Do you mean something like this? Let me know if this is what you mean.

 .container { display: flex; flex-direction: column; height: 500px; }.list1 { border: 1px solid red; overflow-y: scroll; height: 50%; }.list2 { border: 1px solid blue; overflow-y: auto; max-height: 50%; }.list1 div, .list2 div { padding: 20px; }

 <div class="container"> <div class="list1"> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> </div> <div class="list2"> <div> item1 </div> </div> </div>