flex-shrink: 0是让元素跳过flex收缩计算的开关，但单独使用常失效，因需满足前提：父容器设display: flex、未被flex简写覆盖、替换元素配min-width: 0、且作用于直接子元素。
flex-shrink: 0 不是“锁尺寸开关”，而是让元素彻底跳过 Flex 收缩计算——只要父容器设了 display: flex 且空间不足，它就完全不参与压缩分配。但单独写这行，90% 的场景会失效。
为什么flex-shrink: 0加了还是被压扁？
常见失效不是语法错，而是前提没满足：
- 父容器没设
display: flex或display: inline-flex→ 属性根本不解析 - 写了
flex-shrink: 0，但后面又用flex: 1或flex: auto覆盖 → 简写隐含flex-shrink: 1 -
img、button这类替换元素自带min-width: auto，会卡死最小宽度 → 必须显式加min-width: 0 - 图片包在多层
<div> 里，<code>flex-shrink: 0加在 wrapper 上，但真正要保形的是<img> - 父容器本身没宽度约束（比如没设
width、max-width或min-width），先塌缩，子项无框可守 -
flex: 0 0 auto—— 等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，起点就是图片原始宽高 -
width: auto; height: auto—— 防止框架重置样式或flex-basisfallback 覆盖固有尺寸 -
min-width: 0—— 关键隐藏开关，解除min-width: auto锁定，否则flex-shrink: 0形同虚设
img上必须配齐的三件套
单写 flex-shrink: 0 对 <img> 风险极高。它需要明确起点（intrinsic size）、解除默认锁定、防强制拉伸：
补上防撑破和保比例：max-width: 100% + height: auto，完整写法：
img {
flex: 0 0 auto;
width: auto;
height: auto;
min-width: 0;
max-width: 100%;
}
哪些元素真该加flex-shrink: 0？
不是所有子项都需要，只对「尺寸/比例/可读性」敏感的固定型内容才必须加：
- 导航栏里的 Logo（图片或文字，320px 宽下也不能压成一条线）
- 带图标的按钮（
<button><svg></svg>提交</button>，SVG 缩成小点就不可识别） - 侧边栏（
width: 240px），主区收缩时不能塌成 50px - 表单中带单位的输入框（如
<input>px），单位文本需视觉对齐 - 短文本标签（“已读”“VIP”），被压成 “…” 就信息丢失
别全局写 * { flex-shrink: 0 } —— 这会让正常流式区域彻底失效。
移动端小屏下最易忽略的坑
flex-shrink: 0 能保住单个元素形态，但容易引发新问题：
- 多个
flex-shrink: 0元素并排，总宽超容器 → 直接触发横向滚动条，而不是换行 - 父容器用了
max-width: 100%+position: fixed，但没设min-width: 0→ 外层先塌缩，挤压传导到子项 - Safari 旧版本（≤14.1）对
min-width: 0支持不稳定，若子项含white-space: nowrap，可能仍不换行
真正复杂的地方不在 flex-shrink: 0 本身，而在它生效所需的那一整套上下文：父容器的尺寸约束、嵌套层级的 min-width 传递、替换元素的默认行为、以及兄弟项的 flex 分配逻辑。漏掉其中任何一环，它就只是 CSS 文件里一行安静的注释。
