flex-shrink: 0是阻止关键UI元素被挤压的硬性约束，但必须作用于直接子元素、避免被flex简写覆盖，并配合flex-basis或width等基础尺寸声明才能生效。
flex-shrink: 0 是阻止挤压最直接有效的手段，但仅设它还不够——必须确认它作用在正确元素上、没被其他声明覆盖、且配合了基础尺寸约束。
flex-shrink: 0 为什么有时没效果
常见假阴性不是属性失效，而是它根本没被触发或被覆盖：
- 父容器没开
display: flex，flex-shrink完全不解析 - 你写了
flex-shrink: 0，但后面又用了flex: 1或flex: auto，它们会重置全部三个值，flex-shrink回退到1 - 目标是图片，但
flex-shrink: 0加在了外层<div>上，而图片本身仍是 flex 项目的直接子项 → 应该加在<img>自身 - 子项内容过长（如无空格邮箱
user@example.com），flex-shrink: 0不阻止溢出，只禁压缩；此时浏览器优先“撑开”而非“缩”，所以根本没走到收缩逻辑
flex-shrink 和 flex-basis 冲突时怎么选值
当同时存在 width、flex-basis 和 flex-shrink: 0，浏览器按此优先级计算初始尺寸：
-
flex-basis（非auto时） >width（仅当flex-basis: auto） > 默认内容尺寸 - 误写
flex-basis: 100%或过大值（如flex-basis: 999px），会导致初始尺寸远超容器，flex-shrink: 0只禁压缩，不防溢出 - 对图片等替换元素，推荐用
flex: 0 0 auto替代单独写flex-shrink: 0，语义更明确，兼容性一致 - 若需内部文本折行，得额外加
min-width: 0（否则 flex 默认的min-width: auto会锁死最小宽度）
移动端图片变形的典型组合陷阱
这不是单一属性问题，而是几个默认行为叠加导致：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
position: fixed或max-width: 100%→ 实际可用宽度受限 - 子项没设
flex-shrink: 0→ 默认1开始压缩 - 图片没配
max-width: 100%+height: auto→ 外框失守，object-fit失效 - Safari 对
<img>的默认flex-basis计算有偏差，尤其在vh/vmax单位或字体动态加载后重排时
安全写法：<img> 上加 flex-shrink: 0; max-width: 100%; height: auto;，并确保其父容器有明确主轴尺寸（如 width: 100% 或 min-width: 0）。
哪些元素必须加 flex-shrink: 0
不是所有子项都需要，只针对“尺寸敏感”的固定型内容：
- 带图标的按钮（图标缩成小点就失去可识别性）
- 头像、徽标、开关控件（宽高比必须稳定）
- 短文本标签（如“已读”“VIP”，被压成“…”就信息丢失）
-
<img>（即使写了max-width: 100%，没关flex-shrink仍可能被压扁） - 搜索栏里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0）
真正容易被忽略的是：加了 flex-shrink: 0 后，如果多个这类元素并排，窄屏下极易超宽 —— 此时要么加 flex-wrap: wrap，要么用媒体查询降级为 column 布局，而不是指望它自动适配。
