chrome 49及更早版本中height: 100%在flex子项中无效，因blink内核不将flex: 1父容器识别为有高度参照物，需逐级显式设置height（如html, body { height: 100% }），或改用flex: 1配合父容器固定高度。
旧版Chrome（Chrome 49及更早）中，height: 100%在Flex子项里基本无效——这不是兼容性补丁没跟上，而是内核压根不把flex: 1撑开的父容器识别为“有高度”的参照物。
为什么Chrome 49及更早版本里height: 100%算不出来
这些版本的Blink内核对Flex容器的高度继承逻辑不完整：即使父元素写了display: flex和flex: 1，它的height在计算时仍被当作auto，导致子元素的height: 100%退化为height: auto。开发者工具里看到的Computed → height几乎总是auto或0px。
常见错误现象：
-
.content设了height: 80%，但实际高度只由文字撑开，空白区域全空 - 用
min-height: 100vh也没用——因为百分比高度不认min-height作为参照 - 升级到
Chrome 72+后立刻正常，反向验证是内核限制
必须显式设置父容器height（不能靠flex: 1推导）
在旧版Chrome中，flex: 1、min-height甚至max-height都无法让父容器成为百分比高度的有效包含块。唯一可靠方式是给它一个硬编码的height值。
实操建议：
- 逐级向上检查：从目标子元素开始，确认它的直接父级、祖父级……直到
html都显式声明了height，例如：html, body { height: 100% }+.layout { height: 100vh } - 避免用
min-height: 100vh替代——旧版Chrome不把它当有效高度基准 - 如果父容器本身是Flex子项，别指望外层
flex: 1能“透传”高度；必须在它自己这层加height: 400px或height: 100vh - 嵌套两层以上Flex时，每一层都要单独加
height，漏一层就整条链失效
优先改用flex属性替代百分比高度
在旧版Chrome里，flex相关属性的解析比百分比高度稳定得多。只要父容器是display: flex且自身高度已定，flex: 1就能正确分配剩余空间。
注意三个硬前提：
- 父容器必须有
display: flex或display: inline-flex（inline-block不行） - 父容器自身高度不能是
auto（哪怕只写height: 1px也比不写强） - 子元素不能有
min-height: 0（某些UI框架默认加，会卡住拉伸，需覆盖为min-height: auto）
示例：.main { flex: 1; min-height: 0; } 比 .main { height: 100%; } 在旧Chrome里可靠得多。
绝对定位子元素的height: 50%为什么总按视口算
在旧版Chrome中，position: absolute元素找包含块更保守：如果最近的position: relative祖先高度是auto，它不会尝试向上继续找，而是直接 fallback 到视口。结果就是height: 50%永远等于50vh，跟父容器无关。
修复要点：
- 确保最近的定位祖先（比如
.modal-body）有显式height，例如height: 60vh或height: 400px - 不要依赖
flex: 1来撑高这个定位祖先——旧版Chrome不认 - 更稳方案：放弃
height，改用top: 60px; bottom: 20px;，绕过高度继承链
真正麻烦的不是怎么写，而是要意识到：旧版Chrome对Flex高度链的解析是“单层信任”，它不递归、不推导、不妥协。每层都得亲手写height，少一个就塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
