height: 100%失效是因为父元素computed height为auto导致计算结果为0px；需用DevTools逐层检查Computed面板中height值，若为auto则链路中断，推荐改用flex: 1替代。
它不是没写对，是浏览器根本算不出“100% 等于多少像素”——只要父级链里任意一层 computed height 是 auto，整条链就断了，结果就是 0px。
怎么快速定位哪一层高度链断了
别猜，直接打开 DevTools，选中目标元素 → 切到「Computed」面板 → 拉到底部看 height 值：
- 如果是
auto，说明这一层的父级没传下高度，往上点父节点继续查 - 如果是具体像素（如
428px）或100vh，说明链路通了，问题在更下层或被其他样式覆盖 - 重点盯
html→body→ 最外层布局容器（比如.app或#root）→ 目标父容器
为什么 flex 容器里写 height: 100% 反而失效
Flex 容器默认 height: auto，它只负责排列，不自动提供高度上下文。哪怕你看到它“撑开了”，只要 Computed → height 是 auto，子项的 height: 100% 就无从计算。
- 不要同时写
height: 100%和flex: 1：语义冲突，浏览器可能忽略其中一个 - 嵌套 Flex 时，中间层容器要加
min-height: 0，否则默认min-height: auto会卡住内部flex: 1 - 子项写了
align-self: flex-start或min-height: 0，会干掉默认的align-items: stretch行为
用 flex: 1 替代 height: 100% 更可靠
flex: 1 不依赖父级已有高度，而是从 flex-basis: 0 开始拉伸吃剩余空间，天然适配动态内容和多层嵌套。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须是
display: flex且有明确方向（flex-direction: column或row） - 中间区域想填满，直接写
flex: 1，不用碰height - Grid 场景下，优先用
grid-template-rows: auto 1fr auto，比硬塞height: 100%更稳
真正容易被忽略的是：某些 CSS reset（比如 Normalize.css）会悄悄把 html 的 height 重置为 auto 或 0，导致你写了 body { height: 100% } 却白搭；还有 position: absolute 元素的包含块可能跳过视觉父级，回退到 html 或视口——查的时候得顺着包含块逻辑往上找，不是只看 DOM 树。
