height: 50%在flex容器中不生效是因为css百分比高度需基于有明确height（非auto）的父容器，若flex容器自身height为auto，则子元素height: 50%退化为auto；须向上设置html、body及祖先元素的height或min-height（如min-height: 100vh），且在flex-direction: column下应改用flex-basis（如flex: 0 0 60%）而非height；safari 14–15.6存在解析缺陷，不将display: flex父容器视为有效参照，需显式设height；嵌套flex时易因某层min-height缺失导致高度链塌陷。
为什么height: 50%在Flex容器里不生效
不是Flex本身的问题，是CSS百分比高度的通用规则：它必须基于一个**有明确height值（非auto）的父容器**。Flex容器若自身height为auto，子元素的height: 50%就失去参照，直接退化为height: auto。
常见错误现象：div写了height: 80%，但开发者工具里显示计算值是auto，实际高度只由内容撑开。
- 必须向上追溯到某个祖先元素（不一定是直接父级），设
height或min-height - 典型写法：
html, body { height: 100% }+.container { height: 100vh } -
min-height: 100vh比纯height: 100vh更安全，可防Safari地址栏收起时的重算抖动
Flex-direction: column下height百分比被忽略
在垂直主轴中，height: 60%通常无效——因为此时主轴是垂直方向，而百分比高度仍试图参考父容器的**高度**，但父Flex容器的高度往往仍是auto，导致参照失效。
更关键的是：即使父容器有高度，子项的height在column流中优先级低于flex-basis和flex-grow。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 正确做法：改用
flex: 0 0 60%（即flex-basis: 60%） - 必须确保父容器有确定高度（如
height: 400px或min-height: 100vh） -
height是绝对尺寸声明；flex-basis才是Flex布局中真正控制初始尺寸的属性
Safari 14–15.6中height: 100%完全失效
这些版本Safari不会把父Flex容器识别为“有明确高度的上下文”，导致子元素height: 100%在Chrome/Edge中正常，在Safari里却退化为height: auto。
根本原因不是兼容性补丁没打，而是解析逻辑缺陷——它不把display: flex父容器当作百分比高度的有效参照物。
- 必须给父Flex容器显式设置
height（min-height或flex: 1推导出的高度都不行） - 更稳妥解法：去掉子元素的
height: 100%，依赖默认align-items: stretch拉伸 - 若子元素含
<img>，确保它有height: auto或显式尺寸，否则Safari无法估算最小高度
嵌套Flex时height链容易在哪断掉
塌陷常发生在嵌套两层以上Flex时，表面看每层都写了flex: 1，但某一层实际拿到的是height: 0，导致后续所有flex: 1都失去意义。
断点不在代码写错，而在“隐式高度丢失”：某层容器虽写了flex: 1，但它父级是display: block或未设min-height，结果整条链从那里开始归零。
- 内层Flex容器若也是
flex: 1子项，必须同时设min-height: 0（Safari尤其敏感） - 避免在子容器上写
height: 100%——它依赖祖先链全都有明确高度，极难调试 - 用
overflow: auto代替overflow: hidden更稳妥：既保证高度参与计算，又允许滚动，避免裁剪
min-height漏写了，或者误以为flex: 1能自动反向定义父容器高度——它不能。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
