根本解法是设置 box-sizing: border-box，使 padding 和 border 包含在 width/height 内；配合显式 flex-basis 和 min-width: 0 可解决 Flex 子项被撑大及收缩异常问题。
Flex子项被盒模型（比如 padding、border）撑大，本质是默认 box-sizing 为 content-box，导致 width/height 只作用于内容区，而 padding 和 border 额外增加总尺寸。在 flex 布局中，这容易让子项“超容”，尤其配合 flex: 1 或固定 width 时更明显。光靠 flex-shrink 并不能直接解决“撑大”问题——它只控制收缩比例，不改变尺寸计算逻辑。
根本解法：改用 border-box
这是最直接、最推荐的做法。让 padding 和 border 包含在 width/height 内部计算：
- 给 flex 子项统一设置：
box-sizing: border-box; - 建议全局重置（如在 * 或 body 下）：
* { box-sizing: border-box; } - 这样即使写了
width: 200px; padding: 12px; border: 1px solid #ccc;，总宽度仍是 200px，不再意外溢出
配合 flex-shrink 控制收缩优先级
当父容器空间不足时，flex-shrink 决定谁先被压缩。注意它默认值是 1（可收缩），但效果受 flex-basis 和实际内容影响：
- 想让某子项“尽量不缩”，设
flex-shrink: 0;（常用于图标、固定宽按钮） - 想让文本类子项优先收缩，保持
flex-shrink: 1;即可（默认） - 避免滥用
flex-shrink: 999;等魔数——语义不清，后期难维护
检查 flex-basis 是否隐式干扰
flex-shrink 的收缩基准是 flex-basis（不是 width）。如果没显式设置 flex-basis，浏览器会按 width/min-width 或内容自动计算，容易引发意料外行为：
立即学习“前端免费学习笔记（深入）”；
- 显式写清
flex: 0 1 auto;或flex: 1 1 200px;，让 basis 可控 - 对希望“弹性适配”的项，用
flex-basis: 0;（配合flex: 1;）能更均匀分配剩余空间 - 避免只写
width: 200px;却依赖flex-shrink来调节——basis 不明确，收缩结果难预测
别忽略 min-width / min-height 的限制
即使 flex-shrink: 1;，若子项设置了 min-width: 200px;，它也不会缩到 200px 以下。这是常见“缩不动”的原因：
- 检查是否误加了
min-width（尤其来自 UI 库或重置样式） - 需要真正弹性时，改用
min-width: 0;（flex 子项默认 min-width 是 auto，会阻止收缩） - 同理，图片等替换元素默认
min-width: auto，也需手动设min-width: 0;才能正常收缩
基本上就这些。盒模型撑大不是 flex-shrink 能单独解决的，核心是 box-sizing: border-box + 明确 flex-basis + 清理 min-width 干扰。flex-shrink 只是其中一环，用对了才有效。
