align-items: stretch在Safari中并非失效，而是因父容器缺显式高度、子项设min-height:0或height:100%、替换元素默认基线对齐、嵌套中漏写min-height:0等隐性条件被静默拦截。
align-items: stretch 在 Safari 中不是“失效”，而是被几个隐性条件静默拦截了——最常出问题的是 min-height: 0、flex-direction: column 下误用、以及替换元素（如 <img>）的默认对齐行为。
为什么 Safari 里 align-items: stretch 看起来没拉高？
它其实生效了，但 Safari（尤其是 ≤14.1）对 stretch 的触发前提更苛刻：
- 父容器若没显式高度（比如只靠内容撑开），stretch 就无基准可依；
height: 100vh在 iOS Safari 中还会因地址栏收放抖动归零 - 任一子项写了
min-height: 0或height: 100%，Safari 会直接终止 stretch 行为（Chrome 可能仍尝试拉伸） -
<img>、<button>这类替换元素默认按基线对齐（align-items: baseline），即使父级设了 stretch，也会在底部留白，看起来像“没拉高” - 嵌套 flex 容器中，中间层漏写
flex: 1或min-height: 0，弹性空间无法向下传递
修复 Safari 中图片/按钮不等高的具体操作
单纯改 align-items 不够，得配合替换元素自身约束：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 给
<img>加align-self: stretch+object-fit: cover+ 父容器（即 flex 子项）必须有明确高度（例如flex: 1或height: 100%） - 按钮类元素统一加
box-sizing: border-box+height: 100%，但前提是它的父容器高度可计算（不能是height: auto） - 避免用
vertical-align: top—— 在 flex 环境下它被align-self覆盖，基本无效 - 临时调试时，给所有子项加
height: auto !important，如果立刻等高，说明就是某处 height/min-height 锁死了
旧版 Safari（≤14.1）必须加的兼容补丁
这些不是“可选优化”，而是 Safari 断层式缺陷的硬性兜底：
立即学习“前端免费学习笔记（深入）”；
- 所有 flex 子项必须显式加
min-width: 0和min-height: 0，否则flex: 1在垂直方向会塌陷 - 禁用
gap：Safari ≤14.1 完全不解析，改用margin模拟，且需配合overflow: hidden防止换行错位 -
display: -webkit-flex必须和display: flex成对出现，且前者在前；flex简写属性必须拆成-webkit-flex-grow、-webkit-flex-shrink、-webkit-flex-basis - 若用了
flex-direction: column，别指望align-items: stretch控制高度——此时它控制的是宽度，撑高得靠justify-content或子项flex: 1
真正容易被忽略的点是：Safari 对 min-height: auto（现代浏览器默认值）的处理比 Chrome 更激进，它可能让子项“主动拒绝”被拉伸。所以当怀疑 stretch 失效时，优先检查 computed 样式里的 min-height 和 height，而不是反复调 align-items。
