flex容器默认高度自适应，由最高子项撑开；常见“塌陷”是因父容器被height/max-height、position:absolute或overflow:hidden等限制所致。
Flex容器高度自动取子项最大高度，不需要额外设置
只要父容器是 display: flex 且 flex-direction: row（默认），它的高度就会自然由最高的那个子元素撑开——这是 Flex 的默认行为，不是 bug，也不用加 height: auto 或其他 hack。
常见错误现象：容器看起来“塌陷”、子项明明有内容但父容器高度为 0。这通常不是 Flex 没起作用，而是父容器本身被外部样式限制了高度（比如祖先设置了 height: 0、overflow: hidden，或自身是 position: absolute 且没设 top/left/right/bottom）。
- 确保父容器没有
height、max-height或min-height覆盖其自然高度计算 - 检查父容器是否被浮动、绝对定位或 display: inline-block 等非标准流方式“抽离”了文档流
- 子项内部若用了
position: absolute，它不参与高度计算，但不会阻止其他子项撑高父容器
为什么加了 align-items: stretch 还是不等高？
align-items: stretch 是 display: flex 的默认值，显式写上它不仅多余，还容易掩盖真正的问题。等高失效的根源几乎都在“高度来源”被切断：
- 父容器的 computed height 是
auto，但又被祖先的overflow: hidden或transform创建了新的 containing block，导致子项的 stretch 参照错了对象 - 某个子项写了
align-self: flex-start（哪怕只写在一个子项上），就单独退出了拉伸队列 - 子项设置了
height、min-height或max-height—— Flex 的 stretch 会以这些值为上限，不再继续拉伸 - 父容器是
flex-direction: column，此时交叉轴是水平方向，“等高”逻辑自动变成“等宽”，别指望它竖着拉伸
想让 Flex 容器在 column 方向下也“按最高子项定高”？
不能直接靠 align-items，因为 flex-direction: column 下的交叉轴是水平的。此时容器高度仍由子项内容自然累积决定，但“最高子项决定高度”这个需求本身就和 column 布局语义冲突——column 天然是纵向堆叠，高度是累加值，不是取最大值。
如果你实际想要的是“所有子项在 column 布局中视觉上对齐底部”，那应该用嵌套：外层 flex-direction: column 控制结构，每个子项内部再用 display: flex; flex-direction: column + margin-top: auto 把内容推到底部。
如果真需要 column 下多个子项共享同一高度（比如卡片列表），建议换用 display: grid，配合 grid-auto-rows: minmax(0, 1fr) 更可控，也避免 Flex 在 column 模式下的语义错位。
滚动区域里子项高度异常收缩怎么办？
当子项内含可滚动内容（比如带 overflow-y: auto 的面板），浏览器会为其保留一个最小高度（通常是内容第一屏高度），导致 flex: 1 或 stretch 行为卡住、无法填满剩余空间。
- 必须给该子项显式加
min-height: 0，解除 Flex 对最小高度的隐式保护 - 同时确保它的父 Flex 容器有明确高度上下文（比如
height: 100vh或上层flex: 1分配出的空间） - 不要在同一个子项上同时写
height: 100%和flex: 1，二者逻辑冲突，height会优先生效并覆盖 Flex 分配
最易被忽略的一点：Flex 子项的“高度表现”永远取决于父容器的交叉轴尺寸，而不是子项自己写了什么。调样式前，先用浏览器 DevTools 看一眼父容器的 computed height 是多少——如果是 auto，那问题不在子项，而在它上面两层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
