flex-shrink: 0单独使用无效，因它仅跳过收缩计算，不定义尺寸起点；必须配合flex: 0 0 auto、width: auto、height: auto和min-width: 0才能确保图片等敏感元素按固有尺寸渲染并保持宽高比。
直接加 flex-shrink: 0 大概率没用，它只是跳过收缩计算，不定义尺寸起点，也不阻止父容器塌缩——必须配合 flex: 0 0 auto、width: auto、height: auto 和 min-width: 0 才能真正稳住图片、按钮、图标等敏感元素。
为什么 flex-shrink: 0 单独写对图片无效
浏览器看到 flex-shrink: 0 确实会跳过压缩步骤，但默认 flex-basis: 0， 就坍缩成一条线；若你没显式设
flex-basis，它不会自动读取图片固有尺寸（intrinsic size）。
-
flex: 0 0 auto是最稳的写法，等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，明确让图片从原始宽高起步 - 单独写
width: 100%或flex-basis: 100%会按父容器宽度算，父高没约束时纵向照样塌陷 - 某些 UI 框架或重置样式会覆盖
width，所以必须显式补上width: auto; height: auto
哪些元素必须加 flex-shrink: 0
不是所有子项都需要，只对尺寸/比例/可读性敏感的固定型内容才必须加，否则会破坏弹性本意。
-
<img>标签：哪怕写了max-width: 100%，不关flex-shrink仍可能被压扁 - 带图标的按钮（如
<button><svg></svg>提交</button>），SVG 缩成像素点就不可识别 - 头像、徽标、开关控件：宽高比必须稳定
- 短文本标签（如 “已读”“VIP”）：一压就变 “…” 就信息丢失
- 搜索栏里的提交按钮：输入框用
flex: 1，按钮必须flex-shrink: 0
flex-shrink: 0 不生效的常见原因
看起来加了但没效果，大概率不是语法错，而是前提不满足或被覆盖。
- 父容器没设
display: flex或display: inline-flex→flex-shrink完全不解析 - 用了
flex: 1这类简写，它隐含flex-shrink: 1，会覆盖后面单独写的flex-shrink: 0 -
<img>包在多层<div> 里，<code>flex-shrink: 0加在 wrapper 上，但真正要保形的是<img>本身 - 父容器用了
max-width: 100%+position: fixed，但没设min-width: 0→ 外层先塌缩，挤压传导到子项 - Chrome/Firefox 默认给 flex 项加
min-width: auto，得在<img>或其**直接父容器**上加min-width: 0才真正释放限制 - 多个
flex-shrink: 0元素并排（比如导航栏 logo + 3 个图标按钮），总宽超容器，直接触发横向滚动条，而不是换行 - 在
flex-direction: column容器中，flex-basis控制的是高度，此时得检查max-height和object-fit是否配合到位 -
align-items: stretch（Flex 默认）会让<img>强行撑满容器高度，这不是压缩而是拉伸，需改成align-items: flex-start或用align-self单独控制 - 别全局写
* { flex-shrink: 0 }—— 这会让正常流式区域彻底失效
移动端小屏下 flex-shrink: 0 的副作用
它能保住单个元素形态，但容易引发新问题：
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都比写错一行 CSS 更难调试。
