带滚动条的动态弹性框

Question

我想创建一个如下例所示的布局

1. 父容器有固定的高度
2. 如果只有一个子列表，则该列表占据容器的所有高度
3. 如果有两个列表，每个列表为其内容占用足够的空间。 任何高度 > 容器高度的列表 - 另一个列表高度将显示滚动，如果另一个列表的高度 > 父级的 50%，则 2 个列表将占据父级的 50% 高度并显示滚动

我试过使用 flexbox 但仍然没有找到任何解决方案

 .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

你的意思是这样的吗？ 让我知道这是否是您的意思。

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