旧版 safari（ios 9–12.4 / macos 9–12）中 flex: 1 因将 flex-basis 解析为 auto 而导致子项高度坍缩，需同时设置 flex-basis: 0px 和 min-height: 0 才能修复；safari 14–15.6 中 height: 100% 在 flex 容器内失效，须显式设父容器高度或改用 flex: 1； 和 需额外样式约束以避免尺寸异常。
旧版 Safari（iOS 9–12.4 / macOS Safari 9–12）对 flex: 1 的解析错误会导致子项高度坍缩为 0 或分配失衡，这不是写法问题，而是引擎把 flex-basis: auto 当成了默认值——必须显式覆盖它才能修复。
为什么 flex: 1 在 Safari 9–12 里不拉伸高度
标准中 flex: 1 等价于 flex: 1 1 0，但旧 WebKit 把它当成 flex: 1 1 auto 处理；再叠加 min-height: auto（默认值），结果就是子项按内容高度收缩，而非均分容器空间。
- 开发者工具里看到 computed
flex-basis是auto，而非预期的0px - 多个
flex: 1子项中，有的高度为 0，或整体远小于父容器 - 嵌套 Flex 容器中更明显，比如卡片内部再套一层
display: flex; flex-direction: column
必须同时设 flex-basis: 0px 和 min-height: 0
flex-basis: 0px 切断 Safari 对 auto 的错误继承链，min-height: 0 是配套硬性条件——旧 Safari 对 min-height: auto 处理极激进，会直接阻断 flex-basis: 0px 的拉伸启动。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 水平分配：用
flex: 1 1 0px或拆解为flex-grow: 1; flex-shrink: 1; flex-basis: 0px - 垂直分配（
flex-direction: column）：同样用flex-basis: 0px，不能写0%（Safari 会忽略） - 所有参与分配的子元素都要加
min-height: 0（行内布局）或min-width: 0（水平主轴） - 若子元素含
<img>，额外加height: auto，否则 Safari 可能冻结其内在尺寸估算
height: 100% 在 Safari 14–15.6 中完全失效
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: 100vh） - 若父容器是
flex-direction: column，别再写height: 60%，改用flex: 0 0 60%（即flex-basis: 60%） - 检查
html和body：它们默认无高度，height: 100%在它们上无效，需显式声明
图片和按钮这类替换元素最容易踩坑
<img> 和 <button></button> 在 Safari 中行为特殊：前者被 align-items: stretch 强制拉伸，后者被隐式 min-width: min-content 锁死宽度，仅靠通用 Flex 修复不够。
-
<img>必须同时满足：width: 100%、height: auto、object-fit: cover、display: block，且其**直接父容器**要有确定高度（如height: 200px或flex-basis: 200px） -
<button></button>要加min-width: 1px（min-width: 0在 iOS Safari 中常被忽略），搭配flex: 1 0 0和box-sizing: border-box - 避免
max-width: 100%和width: 100%共存，可能触发 Safari 尺寸重算异常 - 多层 Flex 嵌套时，
object-fit和尺寸声明要移到<img>的**直接父容器**上，并设display: block
复杂点在于，这些修复不是单点生效——flex-basis: 0px 没配 min-height: 0 白写，object-fit 没配 height: auto 和父容器高度也白写，漏掉任意一环，Safari 就照常坍缩或拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
