百分比高度在Flex容器中失效是CSS规范行为，因父容器默认height: auto导致子元素height: 100%计算为0；Safari 14–15.6存在引擎级缺陷，不将flex容器视为有效参照物，而Chrome/Firefox需父容器有显式height（如100vh）才支持。
百分比高度在Flex容器里失效，不是Bug，是CSS规范行为——它需要父容器有明确可计算的高度（比如100vh、400px），而Flex容器默认height: auto，子元素的height: 100%就等于100% × 0px，结果就是0px。
为什么height: 100%在Chrome/Firefox里有时“看起来”有效，但在Safari 14–15.6里完全不生效
Safari 14–15.6存在解析缺陷：它不把display: flex父容器识别为百分比高度的有效参照物，哪怕你写了height: 100vh，子项height: 100%依然退化为auto。这不是兼容性补丁问题，而是引擎级逻辑缺失。
- Chrome/Firefox会接受
flex容器作为参照，前提是它自身有显式height（如height: 100vh） - Safari 14–15.6只认
height声明，min-height或flex: 1推导出的高度都不行 - 最稳妥解法：给Flex父容器加
height（不是min-height），且避免嵌套过深——每层都得显式设高
flex: 1比height: 100%更可靠，但必须满足三个硬前提
flex: 1本质是flex-grow: 1; flex-shrink: 1; flex-basis: 0，它不依赖父容器“已有高度”，而是按剩余空间分配。但它不是万能药，三处容易断链：
- 父容器没设
display: flex或display: inline-flex——flex属性直接被忽略 - 父容器自身高度为
auto且无height、min-height或上层flex: 1支撑，“剩余空间”算出来是0 - 子元素被UI框架悄悄加了
min-height: 0（常见于按钮、表格行），这个值会卡住拉伸，需手动覆盖为min-height: auto
Flex方向为column时，别再写height: 50%
在垂直主轴中，height百分比语义混乱：它仍试图参考父容器高度，但父容器高度往往还是auto；更重要的是，height优先级低于flex-basis和flex-grow，基本被忽略。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
flex: 0 0 60%（即flex-basis: 60%），它才是Flex布局里真正控制初始尺寸的属性 - 必须确保父容器有确定高度，比如
height: 400px或min-height: 100vh - 如果子项含图片或文字，
flex-basis: 0可能压扁内容，改用flex: 1 1 auto保留内容基线
嵌套Flex时，高度链最容易在哪一层断掉
塌陷常发生在两层以上嵌套时，表面看每层都写了flex: 1，但某一层实际拿到的是height: 0，导致后续所有flex: 1都失去意义。
- 打开开发者工具，逐级检查Computed →
height，只要出现auto，就说明链路上某一级断了 - 特别注意
html和body：它们默认无高度，height: 100%在它们身上也无效，必须显式设height: 100%或min-height: 100vh - 某些UI库（如Element Plus）对
el-table加了min-height: 0，需手动重置
真正的难点不在写哪行代码，而在判断“当前这个flex: 1到底有没有可分配的空间”——高度链上任何一个auto，都是无声的失败信号。
