max-width: 100% 仅在父容器有明确宽度且元素盒模型适配时生效；需配合 display: block、height: auto 及 min-width: 0（flex 场景）等条件，否则易失效。
max-width 不是“自动裁剪开关”，它只在父容器有明确宽度、且元素自身处于可响应该限制的盒模型中时才起效。单独加 max-width: 100% 几乎必然失效。
父容器本身没宽度，max-width 就没参照系
百分比值必须有计算依据。max-width: 100% 的“100%”是相对于父容器的 width（或 inline-size）计算的。如果父容器宽度是 auto 且无约束，它的“100%”就等于行框宽度、视口宽度，甚至不可预测的文本流宽度。
- 用 DevTools 检查父容器的
Computed → width，如果不是具体数值（如320px、50%），max-width就形同虚设 - Flex 容器未设
width或flex-basis，它会随内容无限撑宽 → 子元素的max-width: 100%始终不触发 - 绝对定位元素的父容器没设
position: relative，定位参考变成视口，max-width对left/top无约束力
img 等替换元素默认不响应 max-width
<img> 是替换元素，默认按固有尺寸渲染，且是 display: inline。此时 max-width: 100% 实际作用于“行框”，不是父容器边界。
- 必须加
display: block，让图片脱离行内流，max-width才真正相对于父容器计算 - 必须配
height: auto，否则高度退化为0或内容高度，破坏比例 - 若父容器用了
padding或border，还得确保它自己是box-sizing: border-box，否则max-width: 100%只参考 content 区
flex 子项被 min-width: auto 卡住
浏览器给 <img>、<input>、<button></button> 等元素设了隐式 min-width: auto，它会阻止 flex-shrink 生效，哪怕你写了 max-width: 100%，子项也拒绝压缩到比原始尺寸更小。
- 必须显式写
min-width: 0—— 这是开关，缺了就白搭 - 搭配
max-width: 100%和height: auto一起用，三者缺一不可 - Safari 尤其严格，光靠
flex-shrink: 1不够，还得加min-height: 0防竖向撑高
伪元素和表单控件悄悄溢出
即使你全局写了 * { box-sizing: border-box }，漏掉伪元素或特定控件，它们仍按 content-box 计算，可能在视觉上“顶破”边界。
- 务必覆盖
*::before, *::after：* { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } -
<input>、<textarea></textarea>自带padding和border，不重置box-sizing+min-width: 0，width: 100%几乎必溢出 <table> 完全无视 <code>max-width，得靠table-layout: fixed+width: 100%最常被忽略的一点：横向滚动条出现时，别急着加
overflow-x: hidden。先用 DevTools 逐层检查 computed width，往往是一个没重置的伪元素、一张没设display: block的图片，或者一个漏掉min-width: 0的 flex 子项，在安静地撑开布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
