flex-shrink-0 有时不生效是因为被更具体的规则或简写覆盖、父容器未设 flex、目标元素非直接子项、或与 min-w-full 等冲突；保固定尺寸用 flex-shrink-0，保换行用 min-w-0。
直接加 flex-shrink-0，但必须确认它没被覆盖、父容器是 Flex、且目标元素是直接子项——否则白加。
为什么 flex-shrink-0 有时不生效
不是类名写错，而是它被更具体的规则或简写覆盖了：
-
flex类（如flex-1）隐含flex-shrink: 1，会覆盖后写的flex-shrink-0 - 父容器没设
flex或inline-flex→flex-shrink根本不解析 - 目标元素被包在一层
<div>里，flex-shrink-0加在 wrapper 上，但真正要保形的是里面的<img>或<button> - 用了
min-w-full或w-full同时又没关收缩，浏览器优先撑宽而非压缩，导致视觉上“没反应”
flex-shrink-0 和 min-w-0 到底该用哪个
看你要保什么：
- 保固定尺寸（图标、按钮、头像、短标签）→ 用
flex-shrink-0，配合flex-none或显式flex: 0 0 auto - 保换行（长文本、URL、日志 ID）→ 用
min-w-0，再加break-all或break-word，否则文字宁可溢出也不折行 - 图片必须三件套：
flex-shrink-0+min-w-0+object-fit-contain（否则flex-shrink-0只跳过收缩，不稳住 intrinsic size）
Tailwind 中防挤压的稳妥组合写法
别只靠一个类。常见原子类组合如下：
立即学习“前端免费学习笔记（深入）”；
- 固定宽按钮：
flex-shrink-0 w-10 h-10（w-10提供flex-basis，flex-shrink-0锁死不缩） - 响应式图片：
flex-shrink-0 min-w-0 w-auto h-auto max-w-full（缺一不可） - 长文本容器：
min-w-0 break-words（break-words是overflow-wrap: break-word的 Tailwind 别名） - 带单位的输入框：
flex-shrink-0 w-24（单位部分如 “px” 文本需对齐，不能被压成 “…”）
移动端和嵌套 Flex 容器里的隐藏坑
这些地方 flex-shrink-0 极易失效：
- 嵌套 Flex：外层
flex+ 内层flex，内层子项必须单独加min-w-0，否则挤压会传导 - 小屏下多个
flex-shrink-0并排 → 总宽超容器，直接横向滚动，而不是换行；此时得补flex-wrap或改用grid - Safari ≤15.6 对
flex-1隐含的min-w-0支持不稳定，必须显式写min-w-0 -
input和textarea不吃flex-shrink-0换行逻辑，只能靠w-full max-w-full overflow-hidden截断
最常被忽略的一点：flex 子项的尺寸稳定性，从来不是单个属性的事——它是 flex-shrink、min-width、flex-basis 和父容器约束共同作用的结果。漏掉任意一环，都可能让 flex-shrink-0 看似加了，实则无效。
