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，拉伸就立即失效。