根本原因是默认box-sizing: content-box，max-width仅约束内容区宽度，padding和border额外叠加导致总宽溢出；需设box-sizing: border-box并验证computed值，flex场景还需min-width: 0。
max-width 本身不会被 padding “撑开”——真正被撑开的是整个元素的总宽度，而 max-width 只约束内容区上限，不干预盒模型计算逻辑。
为什么 padding 会让元素总宽突破 max-width 限制
根本原因在于默认 box-sizing: content-box：你写的 max-width: 600px 仅代表内容区最大宽度，padding 和 border 仍会额外叠加在它外面。比如：
.card {
max-width: 600px;
padding: 20px;
border: 1px solid #ccc;
}
此时元素实际占用宽度是 600 + 40 + 2 = 642px，max-width 完全没拦住总宽溢出。
-
max-width不是“容器总宽上限”，它只管内容区（content）不能超 - padding 和 border 属于“盒外延”，浏览器按标准盒模型照加不误
- 即使父容器设了
width: 100%，子元素仍可能因 padding 累加而横向溢出
flex 或 grid 子项里 max-width + padding 更容易失效
Flex 子项默认 min-width: auto（尤其图片、输入框等替换元素），这会阻止 flex-shrink 生效，导致 max-width 形同虚设，哪怕你加了 box-sizing: border-box 也压不住。
- 必须显式写
min-width: 0，解除最小宽度保护 - 仅靠
flex: 1不够，推荐用flex: 0 1 auto或flex: 0 1 0 - 如果子项含长 URL 或无空格文本，还得叠加
overflow-wrap: break-word
怎么确认问题真被解决
别只看样式面板写了什么，进浏览器开发者工具的「Computed」标签页，直接查目标元素的：
-
box-sizing是否为border-box（不是写了就算，得验证） -
min-width是否已变成0（尤其 flex 场景） -
width和max-width的 computed 值是否符合预期 - 横向滚动条是否消失？若还在，说明内容物理宽度仍 > 容器 width
最常被忽略的一点：伪元素（::before/::after）默认仍走 content-box，全局重置时务必包含 *::before, *::after。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
