flex-shrink: 1 是默认行为，子元素被挤压的直接原因是其默认值为1；需配合 min-width: 0 才能彻底禁用收缩，单独设 flex-shrink: 0 不足。
flex-shrink: 1 是默认行为，不是 bug
子元素被挤压的直接原因就是它默认带 flex-shrink: 1。只要父容器主轴空间不够，浏览器就会按比例缩小所有 flex-shrink: 1 的子项——哪怕你写了 width: 200px，它也只当参考值，不参与最终计算。
这不是渲染错误，是 Flex 规范明确要求的行为：「当总宽超限，必须收缩以保容器不溢出」。你看到按钮变窄、图标缩成小点、文字换行，都是这个逻辑在严格执行。
-
flex: 1、flex: 0 1 auto这类简写都隐含flex-shrink: 1 - 单独写
width或max-width完全无法阻止收缩启动 - IE10+ 支持
flex-shrink: 0（需加-ms-flex-negative: 0）
为什么加了 flex-shrink: 0 还是被压？
看起来生效了，但实际变形还在，大概率是三个隐性约束没解除：
-
<img>、<button>等替换元素自带min-width: auto，必须显式写min-width: 0才真正释放收缩权限 - 父容器本身没设宽度（比如
display: inline-flex又没内容撑开），子项再怎么锁死也没“框”可守 - 祖先元素有
overflow: hidden或text-overflow: ellipsis，配合默认white-space: normal导致视觉截断，误判为挤压
调试时直接看开发者工具 computed styles 里的 flex-shrink 值，别猜；整条 flex 链路都要检查，不止当前元素。
立即学习“前端免费学习笔记（深入）”；
flex: 0 0 200px 比 flex-shrink: 0 + width 更可靠
flex-shrink: 0 只关掉压缩，但不指定基准尺寸，仍可能回退到 flex-basis: auto，尤其内容为空或波动时。更稳妥的是用完整简写：
-
flex: 0 0 200px→ 明确禁用放大、禁用收缩、基准尺寸锁定为 200px -
flex: 0 0 50%也可，但前提是父容器有确定宽度（computed width不为auto） - 避免混用
width和flex-basis，浏览器行为不一致 - 对图片、图标、开关控件这类尺寸敏感元素，优先用
flex: 0 0 auto而非flex-shrink: 0
哪些元素必须加 flex-shrink: 0？
不是所有子项都需要，只对「尺寸敏感」的固定型内容加，否则会破坏弹性布局本意：
- 带图标的按钮（图标缩成像素点就不可识别）
-
<img>标签（哪怕写了max-width: 100%，不关flex-shrink仍可能被压扁） - 头像、徽标、开关控件（宽高比必须稳定）
- 短文本标签（如 “已读”“VIP”，一压就变 “…”）
- 搜索栏里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0）
真正容易被忽略的，是 min-width: 0 这个配套声明——它和 flex-shrink: 0 是一对，少一个，就等于没关掉收缩开关。
