height: 100% 在父容器 height: auto 时计算为 0px 是规范行为，因 100% × auto = 0px；flex: 1 可绕过此限制，依赖主轴剩余空间而非父级像素高度。
父容器 height: auto 会让子元素 height: 100% 计算结果为 0px
这不是 bug，是 CSS 规范强制要求的计算逻辑：height: 100% 必须乘以父容器的 computed height 像素值。而 height: auto 的 computed 值就是 auto，浏览器直接按 100% × 0px = 0px 算出结果——子元素真被设成了 0 高度。
常见现象：
- 子元素明明写了
height: 100%，但实际高度为 0 或仅包裹内容 - 开发者工具中选中父容器 → 「Computed」面板 →
height显示auto，链就断了 - 即使父容器是
display: flex，只要它自身没显式高度，align-items: stretch也不会生效（拉伸需要可拉伸的空间）
Flex 容器设了 display: flex 却仍不提供高度上下文
display: flex 只改变子项排列方式，不改变自身高度行为。它默认仍是 height: auto，由内容撑开。子元素写 height: 100% 时，查的是直接父级的 computed height，不是“有没有 flex”。
容易踩的坑：
- 误以为开启 Flex 就自动有了高度基准，结果整条链在起点就失效
- UI 框架（如 Ant Design）可能给容器加了
min-height: 0，这会进一步压制align-items: stretch，需手动覆盖为min-height: auto - 嵌套 Flex 时，每一层都必须有明确高度来源（
height: 100vh或上层flex: 1），Safari 不会自动穿透多层
为什么 flex: 1 能绕过 height: auto 的限制
flex: 1 不依赖父容器有没有像素高度，它靠的是主轴剩余空间分配逻辑。只要父容器是 display: flex 且自身有明确高度（比如 height: 100vh 或被上层 flex: 1 撑开），子项就能参与分配。
关键点：
-
flex: 1等价于flex: 1 1 0，核心在flex-basis: 0：从零开始分剩余空间，不依赖初始高度 - 若父容器是
flex-direction: column，且有固定高 header/footer，中间区域用flex: 1就能自动填满，不用管html/body是否设高 - 慎用
height: 100%和flex: 1同时写在一个子项上——语义冲突，浏览器可能忽略其中一个
overflow: auto + flex 布局下子元素被截断的根源
当父容器设 overflow: auto 且为 display: flex，子元素默认受 align-items: stretch 影响被拉伸至父容器高度；但如果父容器自身高度受限（如 position: fixed + top/bottom），子元素内容就会被截断。
真实场景中容易忽略的细节：
- 替换元素（
iframe、canvas）在 Flex 中对高度更敏感：height: 100%失效后常表现为一条细线或完全不可见，Computed height 就是0px - 绝对定位元素的百分比高度参考的是包含块（containing block），不是最近的 Flex 父容器；若父级没设
position: relative，就会落到 viewport 上 -
box-sizing: border-box必须显式设置，否则padding和border会额外撑出，导致视觉错位，误以为“没撑开”
height: auto 都会中断继承；更隐蔽的是，某些框架或 reset 会悄悄重置 html 或 body 的高度，让你写了也白写。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
