flex容器高度塌陷的根本原因是父容器缺乏可计算的高度基准，即使设了display: flex，若其自身高度为auto，子元素也无法stretch；需逐层检查祖先元素是否设置了height、min-height等明确高度约束。
Flex容器高度塌陷，根本原因不是漏写了 display: flex，而是父容器没被赋予“可计算的高度基准”——即使写了 display: flex，只要它自身高度是 auto（默认值），子元素就无处可 stretch。
父容器写了 display: flex 但高度还是 0
这是最典型的误判场景：开发者检查 DOM，确认父级有 display: flex，却忽略它上层祖先是否提供高度约束。Flex 容器不会自动“吸住”视口或内容，它只响应明确的高度输入。
- 检查父容器的直接父级是否设置了
height、min-height或max-height；常见遗漏点是html和body没设height: 100% - 若用
min-height: 100vh，注意 iOS Safari 地址栏缩放时vh会跳变，建议降级为min-height: 100dvh（2026 年主流浏览器已支持） - 避免对 flex 容器自身写
height: 100%，除非你逐层确认了所有祖先都有确定高度（否则链路一断，整条归零）
align-items: stretch 不生效的三个硬性条件
align-items: stretch 是默认行为，但它只在“交叉轴有可用空间”时才拉伸子元素。失效往往是因为以下任一条件不满足：
- 父容器没有显式高度（
height/min-height），导致“可 stretch 的空间”为 0 - 子元素自己写了
height、max-height或align-self: flex-start等覆盖值 - 子元素内部是另一个 flex 容器，且该子容器也未设高度，形成嵌套塌陷链
修复优先级：先保父容器有 min-height，再清子元素干扰样式，最后单点加 align-self: stretch。
flex-direction: column 下 height 百分比失效
在垂直主轴中，height: 60% 几乎总无效——不是语法错，而是 CSS 百分比高度规则要求父容器必须有**确定的高度值**（非 auto），而 column 流下父 flex 容器的高度常仍为 auto。
- 正确做法是改用
flex: 0 0 60%（即flex-basis: 60%），它专为 flex 布局设计，不依赖父容器高度是否确定 - 若需动态适配内容，配合
flex-grow: 1更稳妥，比如主内容区用flex: 1，侧边栏用flex: 0 0 240px - 别在 column 子项里混用
height和flex，两者逻辑冲突，浏览器通常以flex-basis为准
子元素全是 inline 内容时容器高度为 0
这是最容易被忽略的底层机制：flex 容器按内容撑高，而纯文本、<span></span>、图标字体等 inline 元素本身不产生块级高度贡献，导致容器“看不见”。开发者工具里看到高度是 0，不是 bug，是规范行为。
- 最轻量修复是给容器加
min-height: 1px（比height: 1px更安全，不截断后续内容） - 若需视觉留白，优先用
padding而非依赖内容撑高 - 导航栏、空卡片等场景，务必主动设
min-height，别指望align-items: stretch救场——它管的是“已有空间内的拉伸”，不是“凭空造空间”
真正麻烦的从来不是怎么写 flex，而是哪一层该负责高度约束、哪一层该负责内容适配——这个责任边界一旦模糊，塌陷就会在任意嵌套深度复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
