height: 100% 在 Flex 容器中失效是因为父容器 height 为 auto，导致计算结果为 0px；必须确保整条高度链上每层父元素（包括 html、body）都有明确高度值或使用 flex: 1 分配剩余空间。
子元素 height: 100% 在 Flex 容器中失效，不是因为你写错了样式，而是浏览器根本没算出“100%”对应多少像素——父容器的 height 是 auto，计算结果就是 100% × 0px = 0px。
为什么父容器 height: auto 就会让 height: 100% 彻底失效
浏览器查的是**直接父元素的 computed height**，不是“看起来有没有高度”。Flex 容器默认就是 height: auto，它只负责排列，不提供高度基准。哪怕你用开发者工具看到它“撑开了”，只要 Computed 面板里 height 显示的是 auto，子元素的 height: 100% 就不会被当作有效声明处理。
- 常见错误现象：
.main写了height: 100%，但高度为 0；检查半天发现它的父级.layout根本没设高 -
html和body必须显式设height: 100%或min-height: 100vh，否则整条链在起点就断了 - 某些 CSS reset（如 Normalize.css）会重置
html或body的height，导致你写了也白写 - 用开发者工具逐层点开目标元素的父级，看 Computed →
height：如果是auto，链就断了；如果是500px或100vh，才说明有值可继承
Flex 容器设了 display: flex，为什么 height: 100% 还是不生效
很多人误以为 display: flex 自带高度上下文，其实不是。Flex 容器本身仍需一个明确的高度来源才能让子项继承——这个来源可以是 height: 100vh、height: calc(100vh - 60px)，也可以是上层 Flex 链中某一级的 flex: 1。
- 不要对 Flex 容器同时写
height: 100%和flex: 1：语义冲突，浏览器可能忽略其中一个 - 如果父容器是嵌套 Flex（比如外层
column，内层row），必须给**每一层** Flex 容器都设height或flex: 1；Safari 不会自动穿透多层 - iframe、canvas 等替换元素在 Flex 中尤其敏感：它们的
height: 100%失效后常表现为一条细线或完全不可见，Computed height 就是0px - 避免在子项上写
min-height: 0后又写height: 100%——Safari 15.4 曾因此直接忽略高度声明
height: 100% 和 flex: 1 到底该选哪个
flex: 1 不依赖父容器的像素高度，它靠的是 Flex 主轴剩余空间分配逻辑；而 height: 100% 是纯继承行为，必须父级有确定高度，否则直接退化为内容撑开。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex: 1 1 0，关键在flex-basis: 0：从零开始分剩余空间，不依赖初始高度 - 若父容器是
flex-direction: column，且有固定高 header/footer，中间区域用flex: 1就能自动填满，不用管html/body是否设高 - 混用
flex: 1和height: 100%可能触发冲突：Chrome 会优先按 flex 规则走，height被忽略 - 想保留百分比语义（比如响应式切换），可用组合：
min-height: 30%; flex: 1;，避免flex完全压制高度意图
真正卡住人的，往往不是“没写 height”，而是“写了 height 却没生效”——因为你没打开开发者工具，逐层点开看 computed height 到底是不是像素值。Flex 布局下，高度链比宽度链脆弱得多，任何一层 auto 都会让整条链失效。
