CSS Flexbox容器高度失效，为何父级高度与拉伸规则无效？

本文共计883个文字，预计阅读时间需要4分钟。

Flex容器中的height不是强制指令，而是声明可用空间。如果其父容器高度为auto（例如，普通div），则Flex容器的高度将由其子元素的高度决定。

• 必须逐级确保 html、body 及所有中间父容器有明确高度，例如：html, body { height: 100%; } 或更稳妥的 min-height: 100vh;
• 若父容器本身是 flex 容器，还需确认它是否已通过 flex: 1 或显式 height 获得了可用空间
• 用浏览器开发者工具检查父容器的 Computed → height，如果是 auto，就坐实了问题根源

align-items: stretch 看似没拉伸？其实是子项自己“拒绝配合”

默认的 align-items: stretch 只对“没设高度限制 + 没被内容撑死”的子项生效。一旦子项写了 height、min-height，或用了 align-self，拉伸就立即失效。

• 检查子元素是否带 height、max-height、min-height —— 这些都会直接阻止 stretch
• 特别注意框架或重置样式悄悄加的 min-height: 0（比如某些 UI 库对 <button> 的处理），它反而会卡住拉伸
• 需要拉伸时，优先删掉子项的 height 类属性，改用 flex: 1 或显式 min-height: 0 来破除隐式最小尺寸保护

Flex 子项写 height: 100% 失效？百分比没有计算基准

height: 100% 是相对于包含块（containing block）计算的。而 Flex 容器默认不把自身高度作为子项的包含块——除非你先让它有明确高度。

• 父容器必须有确定高度（如 height: 400px 或 min-height: 100vh），否则 100% 就是 100% of auto，结果为 0
• 避免依赖 height: 100% 分配空间；在 Flex 布局中，flex: 2 和 flex: 3 更可靠、语义更清晰
• 若必须用百分比，且父容器是 column 方向，可搭配 flex-basis: 0 + flex-grow 替代，避免受内容固有尺寸干扰

为什么加了 flex: 1 还是塌陷？flex-basis: 0 遇上 min-height: auto

flex: 1 展开后实际是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。但现代浏览器会给 flex 项目默认加 min-height: auto，这个“自动最小高度”会压住 flex-basis: 0，导致子项仍按内容撑开而非填满剩余空间。

立即学习“前端免费学习笔记（深入）”；

• 临时验证：给子项加 min-height: 0，立刻看是否恢复拉伸
• 嵌套 flex 容器也要同步处理——外层拉伸了，内层若没设 min-height: 0，依然会卡在内容高度
• 图片、文字等特殊内容需额外干预：img 加 height: 100% + object-fit: cover；长文本加 overflow-wrap: break-word

Flex 高度问题从来不是某一行 CSS 写错了，而是高度约束链断在了某一级——从 html 开始查起，一层层看 Computed → height，比反复调 align-items 有效得多。