求助：实现带滚动效果的动态Flexbox布局

需求说明 #

• 父容器设置固定高度；
• 仅包含一个子列表时，该列表占满容器全部高度；
• 包含两个列表时：
  • 每个列表优先自适应内容高度；
  • 若某列表高度超出「容器总高度 - 另一列表高度」，则该列表显示垂直滚动；
  • 若另一列表高度超过父容器的50%，则两个列表各占父容器50%高度并显示滚动。

解决方案 #

通过Flexbox结合min-height、max-height和flex属性实现，核心是给子列表设置伸缩规则和高度限制，具体代码如下：

CSS 代码 #

.container {
  display: flex;
  flex-direction: column;
  height: 500px; /* 固定父容器高度 */
  gap: 8px; /* 可选：列表间间距 */
}

.list {
  border: 1px solid #ccc;
  overflow-y: auto; /* 内容超出时显示滚动 */
  flex: 1 1 auto; /* 允许伸缩，自适应内容 */
  min-height: 50%; /* 确保至少占容器50%高度 */
  max-height: 100%; /* 单列表时占满容器 */
}

.list-item {
  padding: 20px;
}

HTML 代码 #

<!-- 双列表场景：一个内容多一个内容少 -->
<div class="container">
  <div class="list">
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
  </div>
  <div class="list">
    <div class="list-item">item1</div>
  </div>
</div>

<!-- 单列表场景 -->
<div class="container">
  <div class="list">
    <div class="list-item">single list item</div>
  </div>
</div>

<!-- 双列表均超出50%高度场景 -->
<div class="container">
  <div class="list">
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
  </div>
  <div class="list">
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
    <div class="list-item">item1</div>
  </div>
</div>

逻辑说明 #

1. 父容器：固定高度+垂直Flex布局，确保子列表在垂直方向排列；
2. 子列表：
   • flex: 1 1 auto：允许列表根据剩余空间伸缩，同时优先自适应内容高度；
   • min-height: 50%：当另一列表内容超过容器50%高度时，当前列表至少保留50%高度，避免被压缩过多；
   • max-height: 100%：单列表时可以占满整个容器高度；
   • overflow-y: auto：仅当内容超出列表高度时显示滚动条，保持布局整洁。

内容的提问来源于stack exchange，提问作者dtm