Flex布局天然支持内容撑开高度，关键在于父容器避免设固定高/overflow隐藏、子项不设height:100%、合理用flex:1和flex-shrink:0，并注意box-sizing与margin影响。
Flex 布局本身就能天然支持“内容撑开高度”，无需固定 height，关键在于避免意外限制高度（比如父容器设了 height: 100% 或 overflow: hidden），并合理设置主轴和交叉轴行为。
确保父容器不压制子项高度
Flex 容器默认是 align-items: stretch，会拉伸子项在交叉轴（通常是垂直方向）上填满容器。但若父容器自身高度被限制（如设了 height: 200px 或 max-height），子项就无法随内容撑开。
- 检查父级是否设置了固定高度、
max-height或overflow: hidden/scroll - 移除不必要的
height，改用min-height（如min-height: 100vh）保留弹性空间 - 若需滚动，只对具体子区域设
overflow-y: auto，而非整个 flex 容器
子项不设 height 或 flex-shrink: 0（按需）
默认情况下，flex 子项会自然根据内容高度伸缩。但如果子项内有绝对定位、浮动元素，或 CSS 重置中误设了 height: 100%，就会破坏自适应。
- 子元素避免写
height: 100%、height: 100vh等硬性高度 - 若某个子项需要“不压缩”（比如页脚要始终在底部），可设
flex-shrink: 0 - 内容区常用
flex: 1（即flex: 1 1 0），它允许拉伸填充剩余空间，同时仍尊重内容真实高度
用 flex-direction: column + flex: 1 实现经典三栏式自适应
例如：头部固定、底部固定、中间内容区自动撑开——这是最常见也最容易出错的场景。
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
display: flex; flex-direction: column; min-height: 100vh; - header / footer 设
flex-shrink: 0（防止被压缩） - main 区域设
flex: 1，它会占据所有剩余空间，且内部内容超出时会自然撑高整个页面 - main 内部无需设
height，直接放文字、列表等，高度由内容决定
注意 margin/padding/border 对高度计算的影响
有时看起来“没撑开”，其实是边距或边框导致视觉偏差，或盒模型为 border-box 但内容溢出被裁剪。
- 确认
box-sizing: border-box已全局设置（推荐），避免 padding 撑大实际尺寸 - 检查是否有
margin-top/bottom折叠导致高度丢失（尤其相邻块级元素间） - 用浏览器开发者工具「Computed」面板查看最终 height 和 layout 尺寸，定位是否被意外截断
