max-width不管padding外扩是因为默认box-sizing: content-box，它仅约束内容区宽度，padding和border额外叠加在内容区外；需设box-sizing: border-box并配合min-width: 0（尤其flex场景）才能真正生效。
max-width 为什么不管 padding 外扩
max-width 本身没失效，它只限制内容区宽度，padding 和 border 是“额外加在它外面”的。比如 max-width: 600px + padding: 20px + border: 1px，实际总宽是 642px——max-width 压根不拦这个。
根本原因是默认 box-sizing: content-box，你写的 max-width 只管中间那块“内容”，不是整个盒子。
- 别指望
max-width能当“总宽上限”用，它不是容器边界锁 - 检查开发者工具的「Computed」面板，确认
box-sizing真的是border-box（写了不等于生效） - 伪元素
::before/::after默认也是content-box，全局重置时必须包含*::before, *::after
flex 容器里 max-width + padding 更容易翻车
flex 子项默认 min-width: auto，尤其图片、输入框这类替换元素，会死扛着不缩小——哪怕你设了 box-sizing: border-box，max-width 也形同虚设。
- 必须配
min-width: 0才能让 flex-shrink 生效 -
flex: 0 1 auto比单独写flex-shrink: 1更稳，它明确告诉浏览器“基准按内容，可缩不可伸” - 如果用了
flex: 1，相当于flex: 1 1 0，max-width会被 grow 行为顶穿
怎么验证是不是真修好了
别光看样式面板写了啥，直接进「Computed」查三个值：
-
box-sizing是否为border-box -
min-width是否已变成0（尤其 flex 场景） - 横向滚动条是否消失？还在，说明物理宽度仍 > 父容器
临时加 outline: 1px solid red 看边界，比靠肉眼判断靠谱得多。
响应式图片场景下特别容易漏掉的点
图片设了 max-width: 100% 却还溢出，大概率不是没加 height: auto，而是父容器没宽度、或被 min-width: auto 锁死了。
-
height: auto不是可选项，是维持宽高比的强制条件；height: 100%在父高为auto时算出来就是 0 - flex 容器中，图片必须加
min-width: 0，否则原始宽度压不下去 - HTML 中若存在内联
width/height属性（CMS 或旧代码插入），会直接覆盖 CSS
最常被忽略的是：盒模型修正和 flex 收缩控制必须同时到位，漏掉任意一个，max-width 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
