flex-shrink 默认值是1，但元素仍可能溢出，因其受min-width:auto（默认）和内容固有尺寸限制；需配合min-width:0才能有效收缩。
flex-shrink 默认值是多少？为什么元素还是溢出了
flex-shrink 的默认值是 1，意味着所有 flex 项目在空间不足时**按比例收缩**。但“按比例”不等于“一定不溢出”——如果某个子项设置了固定宽度（如 width: 300px）或最小内容尺寸（min-width: auto，即内容撑开的最小宽度），即使 flex-shrink: 1，它也可能拒绝进一步压缩，导致父容器溢出。
常见误判点：以为设了 flex-shrink: 1 就万事大吉，其实浏览器会尊重 min-width 和内容固有尺寸（尤其是图片、长单词、input 等）。
- 检查是否隐式设置了
min-width: auto（这是 flex 项目的默认行为） - 用
min-width: 0主动解除内容最小宽度限制（对文字容器尤其关键） - 避免在 flex 项目上同时写
width和flex-shrink: 0—— 后者会让前者失效但不报错
什么时候该用 flex-shrink: 0？哪些场景必须禁用收缩
flex-shrink: 0 表示“绝不收缩”，适用于你明确不想被压缩的内容，比如图标按钮、带固定尺寸的头像、开关控件等。但它不是万能保险——若多个 flex-shrink: 0 元素加起来宽度超过容器，就会直接溢出，且无法通过 flex 布局自动调节。
典型需设 flex-shrink: 0 的情况：
立即学习“前端免费学习笔记（深入）”；
- 含固定宽高的
img或svg（除非你允许其模糊缩放） - 带
white-space: nowrap的标签文本（如 badge） - 表单控件如
select、button（某些浏览器对其最小宽度限制较死） - 需要保持比例的组件（如带 padding 的卡片容器）
flex-shrink 配合 min-width: 0 才真正生效
只改 flex-shrink 很少单独起效。真正控制收缩的关键组合是：
flex-shrink: 1; min-width: 0;
因为 flex 项目的默认 min-width: auto 会把内容宽度（比如一段长英文、未换行的 URL）当作不可压缩下限。加上 min-width: 0 后，浏览器才允许将内容区域压缩到 0（实际受字体、行高、内边距等影响，但至少能折行或隐藏）。
- 对文字容器（如
div、span），务必加min-width: 0+word-break: break-word或overflow-wrap: break-word - 对
img，可额外加max-width: 100%防止撑破 - 不要对整个 flex 容器设
min-width: 0，它不生效 —— 必须作用于具体 flex 项目
flex-shrink 数值怎么选？1 和 0 之外还有必要用其他值吗
flex-shrink 是个无单位比例系数，只在多个可收缩项目之间起作用。比如两个项目分别设 flex-shrink: 2 和 flex-shrink: 1，当空间不足时，前者收缩量是后者的两倍。但现实中极少需要精细调这个比例。
更实用的策略是二元划分：
- 想让它参与收缩 →
flex-shrink: 1+min-width: 0 - 想锁死尺寸 →
flex-shrink: 0（并确认它真不需要响应式压缩） - 避免用
flex-shrink: 99或小数（如0.5）—— 没有语义，还容易和flex-grow混淆 - 优先用
flex: 1（等价于flex: 1 1 0）代替手动写三值，更简洁且默认含flex-shrink: 1
真正难的从来不是 flex-shrink 的数值，而是判断哪个元素该收缩、哪个该守着内容边界不动——这得看数据形态和交互预期，不是靠调参能绕过去的。
