box-sizing: border-box 使 min-width 约束边框盒总宽，但需全局重置、处理 flex 子项 min-width: auto 覆盖、父容器宽度缺失、表单/替换元素兼容性及表格单元格单独声明等问题。
box-sizing: border-box 对 min-width 生效，但“撑开”不是它失效，而是你没管住 min-width 的计算基准或 flex 收缩逻辑。
min-width 在 content-box 下会额外叠加 padding/border
写了 min-width: 200px 却看到元素宽达 224px？默认 box-sizing: content-box 下，min-width 只约束内容区最小宽度，padding 和 border 仍额外加在外部。总宽 = min-width + 左右 padding + 左右 border。
- 必须统一设
box-sizing: border-box，让min-width指的是“边框盒总宽”的最小值 - 只给父容器设不够——子元素若仍是
content-box，它的min-width还是按老规则算 - 全局重置要带伪元素：
* { box-sizing: border-box; }+*::before, *::after { box-sizing: border-box; }
百分比 min-width 在父容器无宽时等于 0
min-width: 50% 看似合理，但若父容器没显式宽度（比如 position: absolute、display: inline-block 或 flex 子项未设 flex-basis），浏览器根本算不出 “50% of what?”，结果就是 min-width: 0。
- 检查父容器 computed width 是否为具体数值（如
375px），而非auto或fit-content - 避免对
inline元素用百分比min-width，它不支持 - 替代方案：
min-width: fit-content（内容决定）或min-width: max-content（最长行决定），但注意 Safari 需-webkit-fit-content
flex 子项的 min-width: auto 会覆盖你的 min-width
Flex 容器里，子项默认 min-width: auto —— 这不是 bug，是规范行为：它强制子项至少保持内容固有宽度，哪怕你写了 min-width: 120px，遇到长 URL 或图片也会撑开。
- 必须显式关闭：
min-width: 0（不是min-width: auto的反向设置，而是明确允许压缩到 0） - 必须加在 flex 的**直接子元素**上，嵌套一层就失效
- 同时检查是否写了
flex-shrink: 1（如flex: 1隐含此值），它会让子项主动压缩，覆盖min-width；应改用flex: 0 0 auto或flex: 0 0 120px
表单控件和替换元素绕过 box-sizing 规则
input、button、img 等元素在部分浏览器（尤其是 iOS Safari）中，box-sizing 可能被 -webkit-appearance 或内置最小尺寸拦截，导致 min-width 表现异常。
- 对表单控件，先加
-webkit-appearance: none，再设box-sizing: border-box和min-width - 对
img、iframe，box-sizing完全不生效，必须配max-width: 100%+height: auto - 表格单元格（
td、th）默认无视box-sizing，需单独声明box-sizing: border-box
真正难的不是写那一行 min-width: 0，而是每次撑开都要确认：它是否真作用在 flex 直接子项上、有没有其他样式（比如 width: 100% 或 flex-basis: auto）在覆盖、父容器宽度是否被约束、文本控制三件套（white-space/overflow/text-overflow）有没有写全——漏一个，效果就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
