父元素高度塌陷源于子元素设 display: flex 后脱离文档流且父容器无明确高度；应设 min-height（如 100vh、400px 或 fit-content）或 height，确保 html/body 有 height: 100%，并检查 overflow、position 及子项 flex 基础尺寸。
父元素高度塌陷，本质是子元素启用 display: flex 后脱离了普通文档流的“撑高”逻辑，而父容器自身又没有设定明确高度，导致计算出的高度为 0。
给父容器设置明确高度或最小高度
最直接有效的方式是为父元素指定 height 或更推荐的 min-height，尤其当内容高度可能变化时，min-height 更具弹性。
-
固定高度适用场景：如导航栏、页脚等高度确定的区域，可写
height: 60px -
自适应高度推荐写法：用
min-height: 100vh（视口全高）、min-height: 400px（保底高度）或min-height: fit-content（内容自适应） - 避免只设
height: 100%，除非父级已有明确高度，否则百分比无效
检查是否意外清除了父容器的默认高度行为
某些 CSS 重置或框架（如 Normalize.css）可能移除了 body 或 html 的默认高度约束，导致 100% 高度链断裂。
- 确保根层级有高度支撑：
html, body { height: 100%; } - 若使用
min-height: 100%，同样需保障其祖先元素具备可参考的高度 - 检查是否有
overflow: hidden或position: absolute等属性干扰高度计算
子项未设置 flex 基础尺寸时也可能“不占空间”
当所有子项都设置了 flex: 0 0 auto 且自身无宽高、无内容、无 padding/border 时，Flex 容器可能无法自然撑开。
立即学习“前端免费学习笔记（深入）”；
- 给至少一个子项设置
min-width或min-height（如min-height: 20px） - 用
flex-basis显式定义基础尺寸，例如flex: 1 1 200px - 确认子元素不是空标签或被
visibility: hidden/opacity: 0隐藏（它们仍占布局空间），而是display: none（完全不参与布局）
用开发者工具快速定位问题
在浏览器中右键检查父容器，在样式面板中查看“Computed”选项卡里的 height 和 min-height 实际值，同时观察 Layout 面板中盒子模型是否显示为 0×0。
- 若 computed height = 0，说明确实塌陷；此时看 “Inherited from” 找高度来源缺失点
- 勾选 “Show all” 查看是否被某条规则（如
height: 0 !important）覆盖 - 临时添加
outline: 1px solid red到父元素，直观确认是否渲染出框
