根本原因是html和body未设height: 100%，导致百分比高度参照链中断；需逐层确保祖先元素有明确高度，且避免子元素使用height: 100%干扰align-items: stretch拉伸逻辑。
子元素无法覆盖全屏高度，90%是因为 html 和 body 没设 height: 100%，导致 100vh 或 height: 100% 在后代中失效。
为什么 100vh 在 flex 子元素里“变矮”了
看起来写了 height: 100vh，但实际渲染高度远小于视口——根本不是 vh 单位的问题，而是浏览器在计算百分比高度时，会逐层向上查找“有明确高度的祖先”。一旦遇到 html 或 body 的 height 是 auto（默认值），整条链就断了，height: 100% 会算成 0px。
常见现象：
- 父容器设了
display: flex; height: 100vh;，子元素背景只包住文字 - 开发者工具里看到子元素 computed
height是0px或auto -
100vh看似生效，但嵌套一层 flex 后，内层子项突然塌陷
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须给
html和body都加height: 100%（顺序不能错） - 避免只写
body { height: 100%; }——html不设高，body的100%仍无参照 - 用
min-height: 100vh替代height: 100vh更稳妥：既保证至少撑满视口，又允许内容超出时自然延展
height: 100% 在 flex 布局里为何是“陷阱”
它不光可能算出 0px，还会直接关闭 align-items: stretch 的拉伸逻辑——哪怕父容器真有高度，只要子元素写了 height: 100%，浏览器就认定“你已接管高度”，不再执行 stretch。
典型错误场景：
- 想让某个
.sidebar和主内容等高，随手加height: 100%，结果整个区域塌缩 - 调试时临时加
height: 100%查看效果，忘了删，后续怎么调align-items都没用
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有子元素上的
height: 100%、min-height: 100%、max-height: 100% - 想等高？优先用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 若必须用百分比高度，确保链路上每个祖先（
html → body → .app → .container）都显式设了height或min-height
Firefox 和旧 Safari 对 top: 0; bottom: 0 的兼容性坑
用 position: fixed + top: 0; bottom: 0 模拟全高容器时，部分旧版 Firefox 会误判为“不可拉伸”，导致内部 flex 子项无法 stretch；Safari 14 之前对 inset: 0 支持不全，也容易漏掉高度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 固定定位容器务必显式加
height: 100%（配合html/body的height: 100%） - 用
inset: 0时，降级写法补上top: 0; right: 0; bottom: 0; left: 0 - 避免依赖
bottom: 0单独撑高——它只定义位置，不提供尺寸基准
最常被忽略的一点：即使 html 和 body 都设了 height: 100%，如果中间某层容器（比如 .wrapper）用了 display: flex 但没设高度，它仍会退回到 height: auto，成为新的“断点”。检查时得一层层看 computed height，而不是只盯最外层。
