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 会破坏布局意图。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
此时应改用具体数值控制收缩权重：
-
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 计算，放大收缩偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
