safari中flex子项min-height: 100%解析为0，因其对包含块高度判定更严格：父容器仅设min-height: 100vh而无height时，子项失去百分比参照；需确保html/body有高度、父容器设height或flex: 1，并用flex: 1替代百分比方案。
为什么Safari里min-height: 100%在Flex子项中算成0
不是Safari“不支持”min-height，而是它对“包含块高度”的判定比Chrome更严格：当父Flex容器只设了min-height: 100vh（没设height），Safari会认为这个容器没有明确的“可计算高度”，导致子项的min-height: 100%失去参照，直接解析为0px。
这种行为符合CSS规范但实现更保守——Chrome允许用min-height推导百分比，Safari不行。
- 临时验证方法：给父Flex容器加
height: 100vh（不是min-height），再看子项min-height: 100%是否生效 - 若父容器高度需弹性（比如内容少时最小、多时自适应），改用
height: auto+min-height: 100vh组合，子项改用flex: 1而非百分比 - 避免在Safari中对Flex子项使用
min-height: 100%——它本质是陷阱，不是特性
改用height替代时必须加min-height: 0
直接把min-height: 100%换成height: 100%仍可能无效，因为现代浏览器（包括Safari）会给Flex子项默认加min-height: auto，它会压制height: 100%的拉伸效果。
必须显式覆盖这个隐式约束：
- 给子项加
min-height: 0，释放拉伸权限 - 确保父Flex容器有明确高度（如
height: 100vh或flex: 1） - 子项需保持
align-self: stretch（默认值，但检查是否被框架样式覆盖）
示例写法：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.child {
height: 100%;
min-height: 0;
}
更稳妥的替代方案：别用百分比，用flex: 1
flex: 1在Safari中兼容性远好于height: 100%或min-height: 100%，且语义清晰——它表示“占满剩余空间”，不依赖父容器是否设了height还是min-height。
- 父容器需是
display: flex且主轴方向合适（column时子项垂直填满，row时水平填满） - 子项不要同时设
height或min-height，否则会干扰flex: 1行为 - 若需保留最小高度底线，叠加
min-height: 200px（固定值，非百分比）
这样写既绕过Safari的百分比高度bug，又避免父级高度链断裂问题。
最容易被忽略的一点：html和body的高度链
即使你给Flex容器写了height: 100vh，如果html或body没设高度，Safari仍可能拒绝渲染子项的百分比高度——它会逐层向上校验包含块是否“可信”。
必须确保：
-
html, body { height: 100%; }或更可靠地html, body { min-height: 100vh; } - 中间所有父容器（如果有）都不能是
height: auto且无其他高度来源 - 用开发者工具的Computed面板逐层检查
height值，看到底哪一级断成了auto
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
