flex-shrink: 0 需与 width: auto; height: auto 和 min-width: 0 配合使用才能真正阻止图片压缩，缺一不可；否则因隐性规则覆盖或前提缺失仍会失效。
flex-shrink: 0 是阻止图片被压缩的开关，不是万能保险栓
它直接关掉 Flex 布局中“空间不足就缩你”的默认行为。图片在 Flex 容器里默认是 flex-shrink: 1，只要所有子项总宽超过容器，浏览器就会无视你写的 width: 200px 或 max-width: 100%，强行按比例缩小图片——flex-shrink: 0 就是告诉浏览器：“别动我宽度，哪怕挤爆容器”。但它不定义尺寸、不防溢出、也不管内容怎么填进框里。
为什么加了 flex-shrink: 0 还是变形？常见失效链路
失效几乎从不因为语法写错，而是被隐性规则覆盖或前提缺失：
-
flex-shrink: 0加在了<div>上，但真正要保形的是里面的<img>—— 必须作用于 Flex 容器的**直接子元素** - 图片父容器没设
width或min-width，自己先塌缩，子项再怎么flex-shrink: 0也无框可守 - 图片自身没配
width: auto; height: auto，导致flex-basisfallback 到不可控的固有尺寸（比如 800px），反而加剧溢出 - 漏掉
min-width: 0—— 替换元素（如<img>）默认min-width: auto，会锁死最小宽度，让flex-shrink: 0形同虚设
真正起效的最小组合：三件套缺一不可
单靠 flex-shrink: 0 在真实项目里大概率翻车。必须搭配：
-
flex-shrink: 0：关掉收缩开关 -
width: auto; height: auto：确保图片按原始 intrinsic size 计算基准，不被width: 100%覆盖 -
min-width: 0：解除替换元素的隐性最小宽度锁定，让 Flex 引擎允许尺寸归零（否则flex-shrink: 0根本不会触发）
如果父容器宽度受限，再补一句 max-width: 100% 防溢出；若需保持比例，object-fit 是后续步骤，不是替代方案。
立即学习“前端免费学习笔记（深入）”；
IE11 和 Safari 的兼容细节不能跳过
IE10+ 支持 flex-shrink: 0，但需要加前缀：-ms-flex-negative: 0；Safari 对 min-width: fit-content 支持较晚（iOS 14.5+），老版本建议用 min-width: 1px 或包裹层方案兜底。更稳妥的兼容写法是：用 <div style="flex-shrink: 0; width: 80px; height: 80px;"><img src="x.jpg" style="width: 100%; height: 100%;"></div> —— 用父容器尺寸硬锁，绕过图片自身弹性计算。
min-width、flex-basis、替换元素默认行为之间的耦合。漏掉任意一环，flex-shrink: 0 就只是 CSS 文件里一行安静的注释。 
