旧版Safari（iOS 9–12.4/macOS 9–12）将flex: 1错误解析为flex-basis: auto，导致子项高度坍缩，须同时设置flex-basis: 0px和min-height: 0修复；Safari 14–15.6不识别flex容器为height: 100%的有效参照物，需显式设父容器height或改用flex: 1。
旧版 Safari（iOS 9–12.4 / macOS Safari 9–12）对 flex: 1 的解析存在硬性缺陷，不加补丁几乎必然导致高度坍缩或换行错位；Safari 13–15.6 则在百分比高度、gap、button 宽度等环节持续出问题——这不是“兼容性差”，而是它认真执行了过时草案，必须用显式值覆盖默认行为。
为什么 flex: 1 在 Safari 9–12 中子项高度为 0
标准中 flex: 1 等价于 flex: 1 1 0，但旧 WebKit 把它当成 flex: 1 1 auto 处理，再叠加 min-height: auto（默认值），结果就是子项按内容撑开，而非拉伸填满容器。DevTools 里看到的 computed flex-basis 是 auto，不是 0px。
- 所有参与分配的子元素必须同时加
flex-basis: 0px和min-height: 0（垂直布局则用min-width: 0） - 不能写
flex-basis: 0%—— Safari 会直接忽略 - 若子项含
<img>，额外加height: auto，否则 Safari 可能冻结其内在尺寸估算 - 嵌套 Flex 容器（如卡片内再套
display: flex; flex-direction: column）时，每一层都要重复这套组合
为什么 Safari 13–15.6 中 height: 100% 完全失效
Safari 14–15.6 存在引擎级缺陷：它不把 display: flex 父容器识别为百分比高度的有效参照物，哪怕你写了 height: 100vh，子项的 height: 100% 仍退化为 auto。
- 必须给 Flex 父容器显式设
height（不是min-height，也不能靠flex: 1推导） - 更稳妥解法：删掉子元素的
height: 100%，改用flex: 1，但前提是父容器本身有确定高度（如height: 400px或min-height: 100dvh） - 若父容器是
flex-direction: column，别写height: 60%，改用flex: 0 0 60%（即flex-basis: 60%） - 检查
html和body：它们默认无高度，height: 100%在它们上无效，需显式声明height: 100%
为什么 <button> 在 iOS Safari 中宽度忽大忽小
iOS Safari（尤其 15+）对 <button> 强制施加隐式 min-width: min-content，且会悄悄忽略你写的 min-width: 0 —— 它优先按文字内容撑开，再考虑 flex 分配。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 实测稳定解法是用
min-width: 1px替代min-width: 0，视觉无感又能绕过保护机制 - 搭配
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0） - 每个参与分配的
<button>都要加box-sizing: border-box，否则 padding/border 会撑破计算宽度 - 避免
white-space: nowrap，它会让长文本强行撑开，加剧宽度不一致
为什么 Safari 中图片在 Flex 里被拉伸变形
根本原因不是 bug，而是 Safari 对 align-items: stretch 的严格实现：它强制将 <img> 拉伸到交叉轴高度，而 object-fit 只控制“内容怎么填进盒子”，不定义盒子大小。
-
<img>必须加width: 100%和height: auto（或明确高度），否则object-fit无作用范围 - 其**直接父容器**必须有确定高度（如
height: 200px、flex-basis: 200px，或通过aspect-ratio锚定） - 旧版 Safari（iOS 9–13.1）只认
display: -webkit-flex，必须成对写：display: -webkit-flex; display: flex，且前缀版在前 - 多层嵌套时，
object-fit和尺寸声明要移到<img>的最近一层 Flex 直接父元素上，并加display: block
最易被忽略的是：这些补丁不是“可选优化”，而是 Safari 渲染链路中的必要校准点。漏掉 min-height: 0 或写错 flex-basis 单位，整个 flex 分配就会退回到 content-based 收缩模式——错位不是偶然，是默认行为。
