百分比高度在Flex容器中失效是因为父容器height为auto，导致100%×0px=0px；需逐层检查computed height，确保每层都有确定高度，或改用flex:1等Flex专属属性。
百分比高度在 Flex 容器里没生效，不是你写错了，而是浏览器根本没算出“100%”对应多少像素——父容器的 height 是 auto，结果就是 100% × 0px = 0px。
为什么 height: 100% 在 Flex 子项里直接退化为 auto
浏览器只认父元素的 **computed height 值**，不是“看起来有没有高”。Flex 容器默认 height: auto，哪怕它被内容撑开了，只要 Computed 面板里显示 auto，子项的 height: 100% 就失效。
- 打开开发者工具 → 选中目标子元素 → 切到 “Computed” 面板 → 查
height行：如果是auto，链路就断了 - 必须逐层往上点：子 → 父 → 祖父 →
body→html，中间任何一层是auto，整条链就废了 - 某些 CSS reset（比如 Normalize.css）会悄悄重置
html或body的height，写了也白写
flex: 1 比 height: 100% 更可靠，但三处容易断链
flex: 1 不依赖父容器“已有高度”，靠的是剩余空间分配。但它不是无条件生效，三个硬前提缺一不可：
- 父容器必须有
display: flex或display: inline-flex—— 否则flex属性直接被忽略 - 父容器自身得有可分配的空间：要么自己设了
height（如height: 400px），要么上层有flex: 1或min-height: 100vh支撑 - 子元素不能被 UI 框架加了
min-height: 0（常见于按钮、表格行），这个值会卡住拉伸，需手动覆盖为min-height: auto
在 flex-direction: 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保留内容基线
Safari 14–15.6 中 height: 100% 完全不认 Flex 父容器
这不是兼容性补丁问题，是引擎级逻辑缺失：Safari 14–15.6 不把 display: flex 父容器识别为百分比高度的有效参照物，哪怕你写了 height: 100vh，子项 height: 100% 依然退化为 auto。
- 唯一解法：给 Flex 父容器显式加
height（min-height或flex: 1推导出的高度都不行） - 更稳妥策略：去掉子元素的
height: 100%，依赖默认align-items: stretch拉伸 - 若子项含
<img>，确保它有height: auto或显式尺寸，否则 Safari 无法估算最小高度
复杂点在于高度链不是“设一次就通”，而是每层都得主动声明；最容易被忽略的是 min-height: 0 这类看似无害的重置样式，在 Flex 场景下会直接锁死拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
