Flex容器随子项自然撑高的关键是保持子项在默认flex流中：移除父容器height/max-height/min-height: 0限制；子项避免align-self: flex-start或position: absolute；确保内容有可测量高度。
Flex容器默认不会被子项撑开高度，常见于父容器未设高度、子项用align-items: stretch但内容实际没“撑高”、或内部存在脱离文档流的元素（如position: absolute）。要让flex容器随子项自然撑高，关键是保持子项在默认flex流中，不脱离布局上下文。
确保父容器没有固定高度限制
如果给flex容器设置了height、max-height或min-height（尤其min-height: 0），会抑制其自动伸展。flex容器的默认行为是“包裹内容”，前提是它自身没被约束。
- 检查并移除不必要的
height、max-height - 避免
min-height: 0（它会关闭stretch行为） - 若需最小高度，用
min-height: auto或留空（默认即auto）
子项别设align-self: flex-start或align-self: center
align-items: stretch（flex容器默认值）能让子项在交叉轴（通常是垂直方向）拉伸填满容器高度——但前提是子项自身没有设定明确的高度，且未覆盖对齐方式。
- 子项默认继承
align-self: auto，等同于stretch - 若子项写了
align-self: flex-start，它就不再拉伸，可能造成容器“塌陷” - 检查子项是否意外设置了
align-self或全局重置了align-items
禁用position: absolute，改用flex原生对齐
position: absolute会让元素完全脱离flex流，无法参与高度计算，这是容器撑不开最常见的原因。
立即学习“前端免费学习笔记（深入）”；
- 把绝对定位的按钮、图标、角标等，改用flex的
margin-auto、justify-content、align-self控制位置 - 例如右上角关闭按钮：用
margin-left: auto+align-self: flex-start代替position: absolute; top: 0; right: 0 - 需要重叠效果？用
position: relative配合z-index，而非absolute
内容本身要有“可测量高度”
即使所有设置都正确，如果子项里全是浮动元素、空标签、或display: inline文本没换行，也可能导致高度为0。
- 给子项加
border或background临时调试，看是否真有渲染区域 - 确保文本有内容、图片已加载、或设置了
min-height兜底 - 避免子项用了
height: 0、overflow: hidden隐藏了内容
基本上就这些。核心就一条：让子项老老实实待在flex流里，不抽离、不锁高、不强行截断——容器自然会跟着长高。
