旧版safari（ios 9–12.4/macos 9–12）将flex: 1解析为flex-basis: auto而非0，导致子项高度坍缩；safari 14–15.6则不识别flex容器为height: 100%的有效参照物，须显式设父容器height并配合flex-basis: 0px与min-height: 0修复。
旧版 Safari（iOS 9–12.4 / macOS 9–12）把 flex: 1 解析成 flex-basis: auto，不是标准的 0，导致子项按内容收缩而非拉伸；Safari 14–15.6 则干脆不把 display: flex 父容器当百分比高度的有效参照物——这不是你写错了，是引擎级行为差异。
为什么 flex: 1 在 Safari 9–12 里不拉伸高度
标准中 flex: 1 等价于 flex: 1 1 0，但旧 WebKit 把它当成 flex: 1 1 auto 处理。再叠加默认 min-height: auto，结果就是子项拒绝拉伸，高度坍缩为 0 或远小于父容器。
- 开发者工具里看到
computed flex-basis是auto，而不是预期的0px - 现象集中在嵌套 Flex 容器中，比如卡片内部再套一层
display: flex; flex-direction: column - 必须同时设
flex-basis: 0px和min-height: 0：前者切断错误继承链，后者防止 Safari 激进阻断拉伸启动 - 水平分配用
flex: 1 1 0px，垂直方向同样用0px——别写0%，Safari 会忽略
为什么 height: 100% 在 Safari 14–15.6 中完全失效
Safari 14–15.6 存在引擎级缺陷：它不识别 display: flex 父容器为百分比高度的有效参照物，哪怕你写了 height: 100vh，子项 height: 100% 仍退化为 auto。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须给 Flex 父容器显式设
height（不是min-height，也不是靠flex: 1推导出的高度） - 更稳妥解法：删掉子元素的
height: 100%，改用flex: 1，但前提是父容器本身有确定高度（如height: 400px或min-height: 100vh） -
html和body默认无高度，height: 100%在它们上无效，需显式声明 - 若父容器是
flex-direction: column，别再写height: 60%，改用flex: 0 0 60%（即flex-basis: 60%）
<img> 和 <button></button> 在 Safari 中尺寸异常怎么修
<img> 和 <button></button> 是替换元素，在 Safari 中行为特殊：前者被 align-items: stretch 强制拉伸，后者被隐式施加 min-width: min-content 且忽略 min-width: 0。
-
<img>需额外加height: auto，否则 Safari 可能冻结其内在尺寸估算 -
<button></button>要用min-width: 1px替代min-width: 0（iOS Safari 忽略后者），再配flex: 1 0 0和box-sizing: border-box - 所有参与分配的子元素都要加
min-height: 0（垂直布局）或min-width: 0（水平布局） - 避免混用
flex: 1和width: 100%—— Safari 优先按width计算，flex被降级为无效声明
真正麻烦的是高度链——它不是“设一次就通”，而是每层都得主动声明；最容易被忽略的是 min-height: 0 这类看似无害的重置样式，在 Flex 场景下会直接卡住整个拉伸流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
