旧版 Safari（iOS 9–12.4/macOS 9–12）中 flex: 1 因错误将 flex-basis 解析为 auto 而导致高度坍塌；应显式设为 flex-basis: 0px 并配合 min-height: 0 修复。
旧版 Safari（尤其是 iOS 9–12.4 和 macOS Safari 9–12）中，flex-basis 被错误解析为 auto，导致 flex: 1 子项高度坍塌或分配失衡——这不是写法错，是渲染引擎对初始尺寸的推断失效。
为什么 flex: 1 在 Safari 9–12 里不拉伸高度
标准行为中 flex: 1 等价于 flex: 1 1 0（即 flex-basis: 0），但旧 WebKit 把它当成 flex-basis: auto 处理，再叠加 min-height: auto 的默认值，结果就是子项按内容高度收缩，而非均分容器空间。
- 典型现象：多个
flex: 1子项，其中一个高度为 0，或整体高度远小于父容器 - 开发者工具里看到 computed
flex-basis是auto，而非预期的0px - 尤其在嵌套 flex 容器中更明显，比如卡片内部再套一层
display: flex; flex-direction: column
用 flex-basis 显式覆盖 auto 行为
直接写死 flex-basis 值，切断 Safari 对 auto 的错误继承链。这是最轻量、最可靠的补丁。
- 水平均分：用
flex: 1 1 0px或拆解为flex-grow: 1; flex-shrink: 1; flex-basis: 0px - 垂直均分（
flex-direction: column）：同样用flex-basis: 0px，不能写0%（Safari 会忽略） - 若需保留内容最小高度，改用
flex-basis: min-content（仅 Safari 12.1+ 支持，老版本仍需0px）
flex-basis 与 height 混用时的 Safari 冲突
在 flex-direction: column 下，给子元素同时设 height: 50% 和 flex: 1，Safari 会优先按 height 计算，导致 flex-grow 失效；反过来，只靠 height: 50% 又因父容器高度未锚定而退化为 auto。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 正确做法：删掉
height: 50%，改用flex: 0 0 50%（即flex-basis: 50%） - 但注意：
50%依赖父容器有确定高度（如height: 100vh），否则 Safari 仍无法解析 - 更稳妥：用像素值，如
flex-basis: 200px，避免百分比依赖链断裂
别漏掉 min-height: 0 这个配套修复
flex-basis 补丁生效的前提，是子元素没被自身 min-height 卡住。旧 Safari 对 min-height: auto（默认值）处理激进，会阻止 flex-basis: 0px 的拉伸启动。
- 给所有参与
flex: 1分配的子元素加min-height: 0（行内布局）或min-width: 0（水平主轴） - 如果子元素含图片，额外加
height: auto，否则 Safari 可能冻结其内在尺寸估算 - 避免写
min-height: unset——某些 Safari 版本会跳过整个高度计算流程
真正卡住人的不是 flex-basis 本身，而是它必须和父容器高度、子元素 min-height、以及 WebKit 对 auto 的特殊解释一起校准；少一个环节，坍塌就照常发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
