min-width会覆盖box-sizing的计算结果，当min-width值大于width时，浏览器以min-width为准确定最终宽度；需在开发者工具Computed面板检查min-width实际值是否超标。
box-sizing: border-box 生效了，但元素宽度还是撑不开或被截断，大概率是 min-width 在暗中干预。
为什么 min-width 会让 box-sizing “失效”
box-sizing 控制的是 width 如何参与盒模型计算，但它不压制 min-width 的强制约束。一旦元素内容区被 box-sizing 压缩后，若压缩结果小于 min-width 值，浏览器会无视 box-sizing 的“让步逻辑”，直接把整个盒子拉宽到 min-width 所要求的尺寸——此时你看到的总宽，其实是 min-width 决定的，不是 width。
常见于表单控件（如 input[type="text"]）、响应式卡片、或用了 CSS 框架默认样式的容器。
- 开发者工具里
width显示为 200px，min-width却标着 240px → 实际渲染宽度就是 240px - 设了
width: 100%; box-sizing: border-box;，但父容器只有 200px 宽，子元素却显示为 240px → 很可能min-width: 240px覆盖了百分比计算 - 某些 UI 库（如 Ant Design 的
.ant-input）内部写了min-width: 120px，你改了 box-sizing 也无济于事
怎么快速定位是不是 min-width 搞的鬼
打开浏览器开发者工具，选中异常元素：
- 在 Computed 面板搜索
min-width，看它的值是否大于你期望的 width - 在 Styles 面板里检查所有生效的规则，特别留意带
!important的min-width（它能覆盖你后续写的任何 width 或 box-sizing） - 临时删掉或注释掉你自己的
min-width声明，观察布局是否立刻回归正常 - 对第三方组件，别只查你写的 CSS —— 直接在 Elements 面板右键“Break on > attribute modifications”，然后手动修改元素 class，触发框架重绘，看 min-width 是从哪冒出来的
min-width 和 box-sizing 共存时的真实行为
它们不是互斥关系，而是分阶段起作用：
- 第一步：box-sizing 决定 width 怎么算（比如是否含 padding/border）
- 第二步：浏览器拿这个计算结果和 min-width/max-width 对比，取中间值作为最终宽度
- 所以
width: 200px; box-sizing: border-box; min-width: 220px;→ 最终宽 = 220px，哪怕你加了 padding: 20px，内容区也会被进一步压缩，甚至文字换行 - 同理，
width: 100%; min-width: 300px;在窄屏下会优先满足 300px，导致横向溢出
真正容易被忽略的点：很多 reset 或 normalize.css 文件里悄悄加了 min-width: 0（用于 flex/grid 子项防撑开），而某些 UI 组件又反向加了 min-width: 120px —— 这种隐性对抗不会报错，但会让 width 表现飘忽不定。遇到宽度异常，先盯死 min-width 的实际值，比反复调 box-sizing 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
