若devtools中computed flex-basis显示auto或空值，即为旧版safari（ios 9–12.4/macos 9–12）错误解析所致，其将flex: 1误判为flex: 1 1 auto而非标准flex: 1 1 0，导致高度坍缩、拉伸失准。
直接看 computed 样式里的 flex-basis 值——如果显示 auto 或空值，就是旧版 Safari（iOS 9–12.4 / macOS Safari 9–12）在错误解析，不是你写错了，是它根本没按标准算。
检查 DevTools 中的 computed flex-basis 是否为 auto
这是最快速的定位方式。Safari 9–12 把 flex: 1 解析成 flex: 1 1 auto，而标准应是 flex: 1 1 0。一旦 computed 值是 auto，后续所有拉伸、均分、缩放响应都会失准。
- 打开 Safari 开发者工具 → Elements → 右侧 Computed 面板 → 搜索
flex-basis - 若显示
auto或未列出该属性，说明已触发旧 WebKit 的错误路径 - 不要依赖
flex: 1简写，必须显式写出三值并覆盖flex-basis
验证父容器高度是否形成可靠锚点
flex-basis: auto 依赖内容尺寸推算初始值，而旧 Safari 在父容器高度未锚定时会直接坍缩为 0。靠 height: 100% 几乎必断链。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 父容器不能只靠
height: 100%，得有明确终止点：比如height: 100vh、top: 0; bottom: 0、或固定像素高 - 检查任意一层祖先是否漏设高度——只要中间有一层是
height: auto，整条链就归零 - 移动端注意 viewport 是否缺失
maximum-scale=1.0，Safari 可能因此误判视口宽度，导致高度重算失败
确认子元素是否被 min-height/auto 阻断拉伸
旧 Safari 对 min-height: auto（默认值）处理极其激进，哪怕你写了 flex-basis: 0px，它也会因这个默认值拒绝启动拉伸。
- 所有参与
flex: 1分配的子项，必须加min-height: 0（垂直主轴）或min-width: 0（水平主轴） - 别只加在部分子项上——漏掉一个，整行/列分配就会不均
- 含
<img>的子项额外加height: auto，否则 Safari 可能冻结其内在尺寸估算，缩放后错位加剧
区分 Safari 和 IE 的 flex-basis 单位陷阱
同一段 CSS，在 Safari 和 IE 下要走两套逻辑：Safari 认 0px，忽略 0%；IE 认 0%，不认无单位的 0，且完全忽略 0px。
- 垂直布局（
flex-direction: column）统一用flex-basis: 0px，Safari 有效，IE 需另配-ms-flex-preferred-size: 0% - 水平布局可选
flex-basis: 0px或0%，但百分比务必带小数：写33.333%，别写33%（IE 截断后可能当 0） - 绝对不能混用：比如
flex-basis: 0px+min-width: 0%，会触发 Safari 的解析跳过
真正难控的从来不是 flex-basis 本身，而是它必须和父容器高度、子元素 min-height、WebKit 对 auto 的特殊解释三者同步校准——少一个环节，坍塌就照常发生，且没有任何报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
