min-width 配合 padding 不会让弹性布局失效，而是因 box-sizing: content-box 默认将 padding 计入 min-width 之外，导致总宽超预期；应全局设 * { box-sizing: border-box; } 并在 flex 项上加 min-width: 0 解锁收缩。
min-width 配合 padding 不会让弹性布局“失效”，但会让它看起来没起作用——根本原因是 box-sizing 默认值把 padding 算在了 min-width 之外。
box-sizing: content-box 是罪魁祸首
你写了 min-width: 200px，又加了 padding: 16px，结果元素总宽变成 232px（200 + 16×2），甚至随内容继续变宽。这不是 min-width 失效，而是它只管“内容区最小宽度”，padding 和 border 默认是额外加上的。
- 浏览器默认用
box-sizing: content-box，所以min-width不包含 padding/border - DevTools 里看到 computed width > min-width？先查
box-sizing值是不是还是content-box - 全局修复最稳：在所有 CSS 最前面加
* { box-sizing: border-box; }
flex 子项上叠加 padding 会放大 min-width: auto 的破坏力
Flex 子项本来就有隐式 min-width: auto，再叠一层 padding，等于双重锁定：内容固有宽度 + 内边距 → 更难收缩，更容易撑破容器。
- 哪怕你写了
min-width: 120px，只要min-width: auto还在（DevTools 显示为 auto），padding 就会跟着那个“内容宽度”一起膨胀 - 正确顺序：先加
min-width: 0解锁 flex-shrink，再加box-sizing: border-box把 padding 收进 min-width 范围内 - 别在 flex 项目里混用
width: 100%和flex: 1，它们冲突，容易让 padding 表现更不可控
移动端表单控件是重灾区
input、button 这类元素自带 -webkit-appearance: button，不仅硬编码了最小尺寸（比如 iOS Safari 强制 44px 高），还会让 min-width 和 padding 的组合行为异常。
- 必须先写
-webkit-appearance: none，再设min-width: 0和box-sizing: border-box -
min-width: 100%在横屏缩放时可能触发意外回流，比它更可靠的是min-width: 0+flex: 1 - 高度不受
min-width影响，要限制高度得配min-height或line-height
真正难控的不是 padding 本身，而是它和 min-width: auto、flex-shrink、box-sizing 四者叠加时的优先级——浏览器不会报错，只会默默按规则算出一个你没想到的宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
