padding导致flex子项“缩不动”是因为content-box下padding额外增加宽度，使实际尺寸超容；需用box-sizing:border-box+min-width:0+合理设置flex-basis三者协同解决。
子项加了 padding 就缩不动，不是 flex-shrink 失效，而是盒模型和 flex 计算逻辑在打架——得先让尺寸计算干净，再谈收缩。
为什么 padding 会让 flex 子项“缩不动”
默认 box-sizing: content-box 下，padding 是额外加在 width 外的。比如你写 flex: 1; width: 100%; padding: 12px;，浏览器实际占宽 = 内容宽 + 24px，但 flex 分配空间时只按 “100%” 算，结果就是超容、挤出父容器、触发溢出或换行，看起来像“缩不了”。
-
flex-shrink只管比例，不管尺寸怎么算；它再大，也压不住多出来的那 24px - 如果子项还设了
min-width: auto（默认值），内容固有宽度 + padding 一起锁死底线 -
gap不会触发这个问题，因为它由容器控制，不参与子项自身尺寸计算
用 box-sizing: border-box 收住 padding
这是最直接有效的一步，必须加在子项上，不是容器上：
-
box-sizing: border-box;让width包含padding和border，总宽严格等于你写的值 - 推荐全局重置：
* { box-sizing: border-box; }，避免漏掉第三方组件里的子项 - 注意：它只解决
padding和border，对margin无效；若子项之间用margin分隔，优先换成容器级gap
配合 min-width: 0 解除内容宽度枷锁
即使 box-sizing 搞定了，含文本、<input>、<img> 的子项仍可能因 min-width: auto 撑开——这道隐形锁必须手动打开：
- 横向布局（
flex-direction: row）：给子项加min-width: 0; - 如果子项自己也是
display: flex，且内部有文本要截断，它的子容器也得加min-width: 0; - 特别注意
<input>：需同时在 input 自身和它的父 flex 项上都设min-width: 0;，否则 UA 默认最小宽度（如 Chrome 的 ~13ch）依然生效
别让 width 和 flex 属性互相干扰
混用 width 和 flex 是常见陷阱：
- 写了
width: 100%但父容器没设明确宽度？百分比失效，flex 计算混乱 - 用了
flex: 1（等价于flex: 1 1 0%），flex-basis: 0%在某些场景下会让基准不可预测，改用flex: 1 1 auto更稳 - 想固定宽度又允许收缩？用
flex: 0 1 200px;显式声明flex-basis，比只写width: 200px;可控得多
真正卡住收缩的，往往不是某一行 CSS，而是 box-sizing、min-width、flex-basis 这三层叠加失效——缺一不可，顺序不能乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
