flex-shrink: 0 对带 padding 的子项无效，是因为 box-sizing: content-box 下 padding 额外增加宽度导致溢出，flex-shrink 未被触发；需同时设置 box-sizing: border-box 和 min-width: 0 才能生效。
flex-shrink: 0 为什么对带 padding 的子项无效？
不是 flex-shrink: 0 失效，而是它根本没机会起作用——padding 在默认 box-sizing: content-box 下额外增加宽度，导致子项实际尺寸已超出容器，浏览器直接触发溢出或换行，flex-shrink 根本不参与计算。你看到的“缩不动”，其实是“已经超了，压都压不进去了”。
必须同时加 box-sizing: border-box 和 min-width: 0
只改 flex-shrink 是治标；真正要收住的是尺寸源头：
-
box-sizing: border-box必须加在子项上（不是父容器），让width或flex-basis包含 padding，避免额外膨胀 -
min-width: 0必须加，否则浏览器默认的min-width: auto会锁死内容固有宽度 + padding，flex-shrink: 0形同虚设 - 二者缺一不可：没
box-sizing，padding 仍外挂；没min-width: 0，flex 算法仍按“最小不能小于内容宽”来兜底
推荐用 flex: 0 0 auto 替代零散声明
单独写 flex-shrink: 0 容易被 flex: 1 等简写覆盖，也容易漏掉 flex-grow 的隐式影响。更稳妥的是：
.item {
flex: 0 0 auto;
box-sizing: border-box;
min-width: 0;
padding: 12px;
}
这行代码明确表达：不放大、不缩小、基准尺寸按内容算，且 padding 已纳入尺寸控制。对 <img>、图标按钮、短文本标签等尤其可靠。
立即学习“前端免费学习笔记（深入）”；
移动端图片+padding 组合最容易踩坑
典型错误链：<img> 加了 padding → 没设 box-sizing: border-box → 父容器 align-items: stretch（Flex 默认）→ 图片被垂直撑开 → flex-shrink: 0 完全失效。
修复要点：
- 给
<img>直接加flex: 0 0 auto; width: auto; height: auto; box-sizing: border-box; min-width: 0; - 若父容器有固定高度，必须加
align-items: flex-start或object-fit: contain，否则stretch会强制拉伸图片，绕过所有 flex 控制 - 绝对不要给
<img>写width: 100%—— 它会覆盖 intrinsic 尺寸，干扰flex-basis: auto的计算逻辑
最麻烦的从来不是加哪一行 CSS，而是判断 padding 是否真的被包含、min-width 是否真被重置、以及 align-items 是否在暗中破坏布局——这三个点漏掉任意一个，flex-shrink: 0 就只是摆设。
