flex-shrink: 0是源头解法，它让元素彻底退出收缩计算队列，浏览器分配空间时直接跳过该元素，不干扰flex-grow、兼容ie10+；但需配合min-width: 0解除替换元素默认限制，并确保父容器有明确宽度约束。
因为 flex-shrink: 1 是所有 Flex 子项的默认值，只要总宽超限，浏览器就会无视你写的 width 或 max-width，直接按比例缩小每个子项——这不是 bug，是 Flex 的收缩机制在严格执行。
flex-shrink: 1 怎么偷偷改掉你的 width
你在元素上写了 width: 200px，但 Flex 容器根本不把它当硬约束。它只把 width 当作 flex-basis: auto 的 fallback；真正在分配空间时，用的是 flex-basis + flex-shrink 计算。一旦父容器宽度不够，flex-shrink: 1 就会启动“按权重缩放”逻辑，把你那 200px 压成 140px、90px 甚至更小。
-
flex-basis: auto（默认）会取内容固有尺寸，比如一张 800px 宽的<img>，反而加剧溢出压力 -
flex: 1或flex: auto这类简写会隐式设flex-shrink: 1，容易被忽略 - 哪怕加了
min-width: 200px，它也只是收缩的下限，不是保底——浏览器先压缩到min-width，再决定是否溢出或滚动
为什么 flex-shrink: 0 才是源头解法
flex-shrink: 0 不是“尽量不缩”，而是让该元素彻底退出收缩计算队列：浏览器在做空间重分配时，直接跳过它，只对其他 flex-shrink: 1 的兄弟项重新算比例。它不干扰 flex-grow、不改变排列顺序、IE10+ 都支持（需加 -ms-flex-negative: 0）。
- 别写
flex-shrink: -1——会被忽略并回退到 1 - 避免全局重置
* { flex-shrink: 0 }，这会让正常流式布局彻底失效 -
flex: none等价于flex: 0 0 auto，比flex: 0（实际是flex: 0 1 0%）更安全
flex-shrink: 0 加了还是变形？检查这三个隐性约束
看起来生效了，但元素还是被压扁或错位，大概率不是语法问题，而是被其他默认行为抵消：
-
<img>、<button></button>等替换元素自带min-width: auto（不是 0），会锁死最小宽度 → 必须显式加min-width: 0 - 父容器没设
width或min-width，自己先塌缩，子项再怎么flex-shrink: 0也无框可守 - 对图片用了
width: 100%，覆盖了 intrinsic 尺寸，和flex-shrink: 0配合反而导致外框失守、object-fit失效
真正关键的不是“要不要加 flex-shrink: 0”，而是加在哪、配什么、以及有没有同时处理掉那些看不见的默认约束——尤其是 min-width: auto 和父容器尺寸失控这两点，最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
