flex-shrink: 0没生效是因为父容器未设display: flex/inline-flex、被flex: 1等简写覆盖、替换元素缺min-width: 0，或加在了父容器而非替换元素自身；可靠写法是flex: 0 0 auto并配min-width: 0。
flex-shrink: 0 为什么没生效？先看它有没有被解析
如果 DevTools 里 flex-shrink: 0 被划掉（strikethrough），说明它根本没进入 Flex 计算流程——最常见原因是父容器没设 display: flex 或 display: inline-flex。Flex 属性只在弹性上下文中起作用，display: grid、display: block 甚至留空，都会让 flex-shrink 完全被忽略。
另一个高频原因是子元素自己用了简写覆盖：比如写了 flex: 1，它等价于 flex: 1 1 0%，其中 flex-shrink: 1 会直接覆盖后面单独写的 flex-shrink: 0。同理，flex: auto、flex: initial 都隐含 flex-shrink: 1。
图片/按钮这类替换元素，min-width: 0 比 flex-shrink: 0 更关键
<img>、<button></button>、<input> 是替换元素，浏览器默认给它们加了 min-width: auto（不是 0）。这个隐性约束会锁死最小宽度，导致 flex-shrink: 0 形同虚设——你关掉了收缩开关，但底盘被焊死了。
- 必须显式写
min-width: 0，才能真正释放 Flex 的计算自由度 - 对图片，还要配
width: auto和height: auto，防止框架或重置样式覆盖固有尺寸 - 如果图片包在
<div> 里，<code>flex-shrink: 0必须加在<img>上，而不是外层<div> <h3>别只盯 <code>flex-shrink，flex-basis才是起点flex-shrink: 0只禁压缩，不定义“从哪开始”。如果flex-basis是0（比如flex: 1的默认值）或100%（依赖父容器宽），图片可能坍缩成线，或被拉伸变形。更稳的写法是用完整简写：
flex: 0 0 auto，它等价于：flex-grow: 0;<br>flex-shrink: 0;<br>flex-basis: auto;
这样图片就按 intrinsic size（原始固有尺寸）起步，再配合
min-width: 0，才真正守住比例。移动端和嵌套 Flex 中最容易漏掉的三件事
真实项目里，
flex-shrink: 0看似加了却失效，往往卡在这些看不见的地方：- 父容器用了
max-width: 100%却没设min-width或明确width，自身先塌缩，子项再怎么锁也无框可守 - 图片在
flex-direction: column容器里时，flex-basis控制的是高度，此时要同步检查max-height和object-fit配合方式 - 多层 Flex 嵌套（如卡片 → 内容区 → 图片区）中，外层若无宽度约束，
min-width: auto会阻断内部所有 Flex 计算，flex-shrink: 0根本没机会触发
真正难的不是加那一行 CSS，而是确认它运行的整个链条是否都受控——尤其是
min-width: 0和父级尺寸约束，这两点最容易被跳过。 - 父容器用了
