flex容器默认由最高子元素撑开，若未撑开，需检查height:0/max-height:0/height:100%等限制、align-items非flex-start、绝对定位/浮动子项、图片未设max-width:100%、嵌套时外层缺flex:1或height:100%、误用height而非min-height。
直接给 flex 容器设 height: auto 或不设高度——它本来就会被最高子元素撑开，不需要额外操作。
为什么有时候 flex 容器“没被撑开”？
不是 flex 本身有问题，而是下面这些样式悄悄压制了高度传递：
-
height: 0、max-height: 0、height: 100%这类显式高度限制必须删掉 - 父容器用了
display: grid或flex但没设align-items: start，导致子 flex 容器被居中拉伸/截断 —— 改成align-items: flex-start或加min-height: min-content - 子项用了
position: absolute或float，脱离文档流，无法参与高度计算 —— 换成margin或align-self - 子项含图片但没设
max-width: 100%和height: auto，导致图片溢出或塌陷
嵌套 flex 容器时，高度“卡住”怎么解？
外层 flex 容器设了 flex-direction: column，内层也 flex，但内层高度不动 —— 很可能因为外层没提供可计算的高度锚点：
- 外层若需占满剩余空间，应设
flex: 1（在父 flex 容器中）或height: 100%（在非 flex 父容器中） - 内层 flex 容器**不要**设
height: 100%，否则会强制按父当前高度拉伸，失去自适应能力 - 调试时可临时加
outline: 1px solid red查看各层真实尺寸范围
需要“最小高度兜底”时用 min-height，别用 height
比如希望容器至少显示 200px，内容变多时又能自动增长：
.container {
display: flex;
flex-direction: column;
min-height: 200px; /* ✅ 允许超过 */
/* height: 200px; ❌ 会截断 */
}
min-height: fit-content 在旧版 Safari 中支持差，稳妥起见优先用数值单位，或加 min-height: -webkit-min-content 前缀。
真正要警惕的不是“怎么撑高”，而是那些看似无关的 position、overflow、align-items —— 它们常在你没注意时吃掉高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
