Flex容器内组件高度溢出时，如何实现内容滚动且页脚固定在底部？

问题核心根因来自 Flex 布局的默认规则：纵向方向上的 Flex 子项，默认 min-height 值为 auto——也就是说不管父容器给子项分配了多少可用空间，只要子项内部的内容更长，子项就会被内容硬生生撑开，最终把整个 Flex 容器撑高，导致页脚被挤到视口外、滚动条跑到整个页面外层。

• 你之前找到的给 table 元素加 height: 0 的写法本质是临时 hack：强行让 table 的高度计算从 0 开始，绕过默认最小高度的撑开问题，但这个写法的缺陷非常明显：如果滚动容器内后续要加其他元素（比如表格筛选栏、操作按钮），它会直接打乱正常排版，根本不是通用的可靠方案。

正确修复方案 #

不需要修改原有 DOM 结构，也不需要给内容元素加无意义的高度 hack，仅需调整三处 CSS 属性即可实现预期效果：

1. 给作为伸缩子项的 .body 添加 min-height: 0，从根源上打破默认最小高度被内容撑开的问题
2. 移除滚动容器 .component-wraper 上的 height: 100% 声明，避免因为父级高度计算误差导致的布局错位
3. 给固定位置的标题区、页脚区添加 flex-shrink: 0，保证它们永远保持固有尺寸，不会被内部内容压缩

修改后的完整 CSS 代码如下：

.container {
  width: 80vw;
  height: 50vh;
}

.wraper1 {
  background: green;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.title {
  margin-bottom: 30px;
  flex-shrink: 0;
}

.body {
  flex-grow: 1;
  /* 关键修复：打破min-height:auto的默认撑开行为 */
  min-height: 0;
}

.component-wraper {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.footer {
  flex-shrink: 0;
}

实现逻辑说明 #

• 整个外层 .wraper1 是固定高度的纵向 Flex 容器，被明确划分为三个部分：顶部标题区、中间内容伸缩区、底部页脚区
• 页脚和标题区设置 flex-shrink:0，保证它们永远保持固有高度，不会被内容压缩
• 中间的内容伸缩区通过 min-height:0 约束，不会被内部超长表格撑开，始终占据父容器扣除标题、页脚高度后的剩余空间
• 内部的 .component-wraper 设置 overflow:auto 后，就会在自身可用空间被占满时触发滚动条，完全不会影响外层容器和页脚的位置

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