flex容器默认高度自适应，无需额外设置；“不撑开”主因是height/max-height限制、父容器align-items影响、子项脱离文档流或图片未设max-width/height:auto。
flex 容器默认就是高度自适应的，不需要额外设置 height: auto 或 min-height: fit-content —— 真正卡住高度的，几乎全是外部干扰项。
为什么 flex 容器“不撑开”高度？
常见现象是内容增加后容器高度没变，导致溢出或滚动条意外出现。这不是 Flexbox 的缺陷，而是被以下样式悄悄压制了：
-
height: 0、height: 100%或max-height: 0这类显式限制必须删掉 - 父容器用了
display: flex或display: grid，但没设align-items: start，导致子 flex 容器被居中拉伸/压缩 - 子项用了
position: absolute或float，脱离文档流，无法参与高度计算 - 子项含图片但没设
img { max-width: 100%; height: auto; }，图片撑破或塌陷高度
flex 子项内部高度不随内容变化？
典型场景：卡片里有个 display: flex; flex-direction: column; 的区域，文字增多后高度卡死。问题往往出在子项自身：
- 子项默认有
min-height: auto（尤其在 flex 容器中），会阻止height: auto按内容撑开 —— 改成min-height: 0或min-height: unset - 若父 flex 容器是
flex-direction: column，又给该子项设了flex: 1或flex-grow: 1，它就会强行占满剩余空间，覆盖内容真实高度 - 调试时可临时加
outline: 1px solid red查看各层实际尺寸边界
需要“最小高度 + 内容可扩展”怎么办？
比如一个带标题的面板，空时至少高 200px，有内容就自动变高：
立即学习“前端免费学习笔记（深入）”；
- 用
min-height: 200px，别用height: 200px—— 后者会截断或强制固定 -
min-height: fit-content在 Safari 16.4+ 才支持，旧版 Safari 建议 fallback 到min-height: -webkit-min-content或数值单位 - 嵌套 flex 时，外层若需占满剩余空间，应设
flex: 1（在父 flex 容器中）或height: 100%（在非 flex 父容器中）；内层则避免设height: 100%，否则失去自适应能力
真正要警惕的不是“flex 高度难搞”，而是那些看似无关的 position、overflow、父容器的 align-items —— 它们常在你没注意时吃掉高度。
