Safari 中 flex-shrink 默认为 1 会导致子项异常压缩，显式设为 flex-shrink: 0 可避免塌缩，但需结合 min-width: 0 防止文本撑开，且不可滥用以免破坏响应式收缩逻辑。

flex-shrink 在 Safari 中默认值引发的拉伸异常

Safari（尤其是 15.x–16.x）对 flex-shrink 的解析比 Chrome/Firefox 更严格：当父容器设为 display: flex 且子项未显式声明 flex-shrink 时，Safari 会将 flex-shrink: 1 视为“可压缩”，即使子项内容很短，也可能被意外压缩变窄，甚至文字换行或图标错位。这不是 bug，是规范实现差异——Safari 更贴近旧版 Flexbox 草案中对收缩因子的权重处理。

常见现象包括：button 宽度塌缩、input 被压扁、图标和文字在 flex-direction: row 中错开。

为什么设成 flex-shrink: 0 通常最安全

设为 0 表示“禁止收缩”，能直接切断 Safari 的异常压缩逻辑。它不等于“禁用弹性”，只要配合 flex-grow 或固定宽高，布局依然可控。

• 适用于宽度需保持最小内容宽的元素（如按钮、开关、带图标的标签）
• 若子项本身有 width 或 min-width，flex-shrink: 0 可确保该约束不被覆盖
• 与 flex: 0 0 auto 等效，但显式写更易排查（避免被 flex 简写覆盖）
• 注意：不要全局加在所有 Flex 子项上，否则失去响应式收缩能力

什么时候不能只用 flex-shrink: 0

若子项需要在空间不足时隐藏溢出（如导航栏菜单项），或需与其他项按比例收缩（如表单左右两栏），硬设 0 会破坏布局意图。

立即学习“前端免费学习笔记（深入）”；

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

此时应改用具体数值控制收缩权重：

• flex-shrink: 1（默认）→ Safari 下可能过度收缩；可尝试 flex-shrink: 0.5 降低权重
• 多个子项间用不同值做优先级：如主内容 flex-shrink: 1，侧边栏 flex-shrink: 3，让 Safari 优先压缩后者
• 搭配 min-width: 0 使用——防止 Safari 因内部 inline-size 计算逻辑把文本容器撑开后又强行收缩导致文字截断

验证是否真由 flex-shrink 引起

快速定位方法：在 Safari 开发者工具中临时勾选/取消子项的 flex-shrink 声明，观察尺寸变化。若开启即塌缩，基本确认问题根源。

更稳妥的写法是统一初始化：

/* 避免依赖浏览器默认值 */
.flex-item {
  flex-shrink: 0; /* 显式声明，覆盖 Safari 默认行为 */
  min-width: 0;   /* 防止文本类内容意外撑开 */
}

复杂布局中，flex-shrink 的实际效果还受父容器 flex-basis、子项 box-sizing 和字体渲染差异影响——Safari 下尤其要注意 box-sizing: border-box 是否全局生效，否则 padding 会参与 flex 计算，放大收缩偏差。