Flex容器高度为0是因为其自动高度不继承子项块级尺寸逻辑，仅依赖自身内容盒固有尺寸，而空flex子项默认不贡献高度。
Flex容器高度为什么是0？
当父容器设了 display: flex，子元素又全是 flex 项（比如没设 height 或内容为空），浏览器很可能把它算成 0 高度——不是 bug，是规范里明确写的：弹性容器的**自动高度不继承子项的“块级”尺寸逻辑**，它只看自身内容盒（content box）的固有尺寸，而 Flex 子项默认不贡献这个尺寸。
- 常见错误现象：
div看起来“消失”了，getBoundingClientRect().height返回 0，背景色/边框不显示 - 典型场景：用 Flex 做布局骨架，但中间区域没写死高、也没内容、也没触发最小尺寸约束
- 别指望
align-items: stretch自动撑开父容器——它只拉伸子项，不反向定义父项高度
怎么让Flex容器有高度？三种可靠方式
核心思路只有两个：要么给容器自己定高，要么让它的内容产生可测量的高度来源。以下方法按优先级和兼容性排序：
-
height或min-height直接写死：最稳，适合已知视口比例或固定区域（如页脚固定高） - 子元素加
min-height: 0+ 内容/伪元素占位：当子项本身是flex容器且内部空时，min-height: 0能解除“最小高度为内容高度”的默认行为，再配合::before插个content: ""就能触发渲染流 - 用
align-content: flex-start配合多行 Flex（flex-wrap: wrap）：仅当真有多行且需要垂直对齐时才有效，单行无效
示例（修复空容器塌陷）：
section {
display: flex;
}
section > div {
min-height: 0; /* 关键：解除子项默认最小高度限制 */
}
section > div::before {
content: "";
display: block;
height: 1px; /* 极小但足够触发高度计算 */
}Flex子项的align-self会影响父容器高度吗？
不会。无论子项设 align-self: center 还是 flex-end，父容器高度仍由其自身的尺寸规则决定，不是由子项最终位置推导出来的。浏览器在布局阶段先确定容器高度，再按该高度分配子项位置。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：以为把子项居中了，“视觉上看到内容”，就等于容器有高度——其实只是子项被挪到了坐标 (0, 0) 上方，容器本身仍是 0 高
- 验证方法：临时加
outline: 1px solid red到父容器，看红框是否出现；或者用 DevTools 的 Layout 面板检查 computedheight - 参数差异：
align-items是容器级属性，影响所有子项；align-self是子项级覆盖，但两者都不参与父容器高度计算
用height: 100%为什么经常失效？
因为百分比高度依赖父元素有**明确的高度值**（非 auto）。Flex 容器若没显式设高，其父级又是 height: auto，那 height: 100% 就退化为 height: auto，回到塌陷原点。
- 兼容性影响：IE11 对 Flex + 百分比高的组合支持极差，建议降级用
min-height或 JS 补偿 - 性能提示：避免链式
height: 100%（A→B→C→D），每层都得等上层 layout 完成，可能触发重排 - 更稳妥的替代：
flex: 1（即flex: 1 1 0）在主轴方向拉伸，比height: 100%更符合 Flex 语义，且不依赖祖先高度
真正难的不是写哪行代码，而是意识到：Flex 容器的高度不是“被内容撑出来”的，而是“被规则定义出来的”。一旦忘了这点，查半天 overflow 或 position 都没用。
