flex-shrink: 0 并非绝对阻止压缩，需配合 flex-basis、white-space 和 min-width 等属性协同控制；推荐使用 flex: 0 0 auto 明确禁用伸缩并以内容宽度为基准。
flex-shrink 0 确实能阻止压缩，但得看父容器有没有留够空间
只设 flex-shrink: 0 不一定管用——如果父容器的 flex-wrap 是 nowrap，且所有子元素总宽度超过容器，浏览器仍会强行压缩（尤其在 Chrome 中），因为这是 flex 布局的默认容错行为。这时候 flex-shrink: 0 被“覆盖”了。
- 必须同时确认父容器没设
overflow: hidden或width过小 - 若子元素本身含不定宽内容（比如长英文单词、未断行的 URL），需额外加
min-width: 0或overflow: hidden防止内部溢出触发收缩 - 文字类内容建议搭配
white-space: nowrap+overflow: hidden+text-overflow: ellipsis控制显示
更稳妥的写法是 flex: 0 0 auto
flex: 0 0 auto 是 flex-grow、flex-shrink、flex-basis 的简写，明确禁用伸缩且以内容宽度为基准，比单独写 flex-shrink: 0 更可靠。
.item {
flex: 0 0 auto;
}
-
flex: 0 0 auto=flex-grow: 0+flex-shrink: 0+flex-basis: auto - 如果希望子元素至少占满容器剩余空间，可改用
flex: 0 0 min-content或flex: 0 0 max-content（注意兼容性） - 避免混用
flex: 1和flex-shrink: 0在同一父容器中，容易引发尺寸争夺
遇到文字撑开又不换行？检查 white-space 和 min-width
即使设了 flex-shrink: 0，纯文本（尤其无空格长串）仍可能迫使 flex 容器“妥协”并压缩其他项。这不是 bug，而是 flex 对内容尺寸的被动响应。
- 给文字容器加
white-space: nowrap锁定单行 - 加上
min-width: 0（对 flex 子项很关键），否则浏览器可能按内容最大宽度估算，导致布局异常 - 若要截断显示，补全三件套：
overflow: hidden+text-overflow: ellipsis+white-space: nowrap
移动端 Safari 下 flex-shrink 0 失效？可能是 zoom 或 viewport 触发重排
iOS Safari 在页面缩放或 viewport 设置不当时，有时会忽略 flex-shrink: 0，表现为子元素被意外压缩。这不是 CSS 解析问题，而是渲染层对 flex 尺寸的重新评估。
立即学习“前端免费学习笔记（深入）”；
- 确保
<meta name="viewport">包含width=device-width, initial-scale=1 - 避免在 flex 子元素上使用
transform: scale()或动态修改font-size，会干扰 flex 基准计算 - 极端情况可尝试加
will-change: transform强制硬件加速，但仅作调试用
