safari中flex-shrink:1导致元素被压扁，根本原因是其对flex-shrink加权计算更激进，需同时满足min-width:0、box-sizing:border-box、避免width与flex混用，并针对button用min-width:1px+flex:1 0 0，嵌套时外层需显式height且内层设min-height:0。
flex-shrink: 1在Safari里为什么会让元素被压扁
不是写错了，是 Safari（尤其 iOS 12–15）对 flex-shrink 的加权计算逻辑更激进：它会把子项的 flex-basis（或 width）和 shrink 值一起算“溢出权重”，然后按比例压缩——但一旦遇到 min-width: min-content（比如 <button></button>）、box-sizing: content-box 或未设 min-width: 0，整个压缩过程就失控，表现为文字截断、图标变形、列宽崩塌。
必须同时处理的三个关键点
单独改 flex-shrink 没用，Safari 要求配套约束才启动稳定计算：
-
min-width: 0（水平布局）或min-height: 0（垂直布局）——否则 Safari 默认min-width: auto会锁死拉伸/压缩路径 -
box-sizing: border-box—— 否则 padding/border 算入 width，导致实际宽度超出 flex-basis，触发异常溢出 - 避免混用
width: 100%和flex: 1—— Safari 优先按 width 计算，flex 规则直接降级失效
iOS Safari 中 button 的特殊坑
<button></button> 元素自带隐式 min-width: min-content，且 iOS Safari 会悄悄忽略你写的 min-width: 0。实测唯一稳定解法是：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 用
min-width: 1px替代min-width: 0 - 搭配
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0） - 所有同级
<button></button>都要加，漏一个就会因基准不一致导致整行错位
嵌套 Flex 容器里 flex-shrink 失效的根本原因
旧版 Safari（iOS 13.3 及更早）对嵌套 Flex 的尺寸锚点要求极严：外层容器若没显式 height（不是 min-height，也不是靠 flex: 1 推导），内层的 flex-shrink 就根本不参与计算，直接退化为块级流布局。
必须做到：
- 外层 Flex 容器设
height（如height: 100vh或具体像素值） - 内层子项加
min-height: 0（垂直方向）或min-width: 0（水平方向） - 若用
display: -webkit-flex（兼容 iOS 9–12），所有属性都要配前缀：-webkit-flex-shrink、-webkit-flex-basis等
flex-shrink 不是开关，而是参与加权运算的系数；Safari 对它的依赖远高于 Chrome，任何一环缺失（比如漏掉 min-width: 0 或父容器缺高度），整个计算链就中断。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
