flex-shrink: 0是唯一能跳过flex压缩计算的开关，需作用于直接子元素并配合flex: 0 0 auto、min-width: 0等才能确保尺寸稳定，单独使用易因隐性约束失效。
因为 width 在 Flex 容器里不参与主轴尺寸计算，真正起效的是 flex-basis；而所有子项默认 flex-shrink: 1，只要空间不足，浏览器就直接忽略你写的 width，强行压缩。
flex-shrink: 0 是唯一能跳过压缩的开关
它不是“修复”，而是按规范主动关闭默认收缩行为。设了 flex-shrink: 0 后，该元素在空间分配阶段完全不参与比例计算，width 才有机会被尊重。
- 必须作用于 Flex 容器的直接子元素，父容器没设
display: flex或inline-flex就无效 -
flex-shrink: -1会被忽略并回退到1，别写 - 不要全局重置
* { flex-shrink: 0 }，会破坏正常弹性逻辑 - 只对尺寸敏感的元素加：按钮图标、
<img>、头像、短标签（如 “VIP”）
为什么只加 flex-shrink: 0 还是变形？
flex-shrink: 0 只关掉了压缩，但没定义尺寸起点。如果 flex-basis 是 auto，且内容塌缩（比如空 <div>、未加载的 <code><img>），元素仍可能坍缩成一条线。
-
<img>必须同步加min-width: 0，否则浏览器默认的min-width: auto会阻止它缩到合理尺寸 - 父容器本身被外层 Flex 压缩（比如嵌套 Flex），子项再怎么设
flex-shrink: 0也无框可守 - 误设了
flex-wrap: wrap，看起来像压缩，其实是换行；确认是否真需要单行显示 - 祖先元素有
overflow: hidden或text-overflow: ellipsis，配合默认white-space: normal导致文字换行，误判为挤压
最稳妥的写法是 flex: 0 0 auto
它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，显式锁死三项，避免被其他简写（比如 flex: 1）意外覆盖，也比单独写 flex-shrink: 0 更明确锚定尺寸起点。
- 对图片更安全：
img { flex: 0 0 auto; width: auto; height: auto; min-width: 0; } - 百分比
flex-basis（如flex: 0 0 50%）依赖父容器宽度确定；若父容器是inline-flex或浮动，其宽度可能为0px，导致50%失效 - 过渡动画中
width无法插值，因起始值常为auto；改用min-width+width组合，或用transform: scaleX()避开 Flex 干扰
真正容易被忽略的，是图片是否作为直接 flex item、父容器是否有隐式嵌套 flex、以及加载时机带来的尺寸跳变——这些都比写错一行 CSS 更难调试。
