Flexbox布局问题：无需JS实现容器高度适配与滚动效果

我刚好解决过类似的布局需求，完全可以用纯CSS Flexbox实现，不需要依赖JavaScript。核心是利用Flexbox的弹性布局属性，结合max-height和overflow控制滚动，同时给底部容器设置最小高度。

核心思路 #

1. 父容器设置垂直方向的Flex布局并固定高度，作为整个布局的基础框架。
2. 顶部内容容器：用flex: 1让它弹性占据剩余空间，同时通过max-height: 80%限制其最大高度不超过父容器的80%，内容超出时用overflow-y: auto触发垂直滚动。
3. 底部容器：设置min-height保证它不会低于指定高度，同时通过Flex属性让它填充父容器剩余空间（或保持自身高度，可按需调整）。

完整代码示例 #

<div class="parent-container">
  <div class="scrollable-top">
    <!-- 这里放置自适应内容，超出会自动滚动 -->
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
  </div>
  <div class="fixed-bottom">
    <p>底部区域 - 具备最小高度</p>
  </div>
</div>

.parent-container {
  display: flex;
  flex-direction: column;
  height: 500px; /* 父容器固定高度，可根据需求调整 */
  border: 2px solid #ddd;
  padding: 8px;
  gap: 8px;
}

.scrollable-top {
  flex: 1; /* 弹性占据剩余空间 */
  max-height: 80%; /* 最大高度不超过父容器的80% */
  overflow-y: auto; /* 内容超出时垂直滚动 */
  background-color: #f8f8f8;
  padding: 12px;
}

.fixed-bottom {
  flex: 0 0 auto; /* 默认：不扩展不收缩，自适应内容高度 */
  /* 如果希望底部始终填充剩余空间，改用下面这行 */
  /* flex: 1 0 100px; */
  min-height: 100px; /* 最小高度，可根据需求调整 */
  background-color: #e8e8e8;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果说明 #

• 内容较少时：顶部容器自适应内容高度，底部容器填充父容器的剩余空间，且不会低于设置的最小高度。
• 内容过多时：顶部容器被限制在父容器的80%高度，超出的内容会出现滚动条，底部容器占据父容器剩余的20%空间（只要该空间不小于底部容器的最小高度，若父容器高度过小，底部容器会保持最小高度，顶部容器的最大高度会被自动压缩）。

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