max-width 失效的五大原因：①被 width 直接覆盖；②flex 子项默认 min-width: auto 阻止收缩；③长文本/url 不折行撑破容器；④表格和 inline 元素不响应 max-width；⑤white-space 等属性干扰。
max-width 被 width 直接覆盖
这是最常见也最容易忽略的原因：你写了 max-width: 600px，但同时又写了 width: 100% 或 width: 800px。CSS 中 width 是“强制设定”，而 max-width 是“上限守门员”——只要 width 的计算结果超过 max-width，浏览器就按 width 执行，max-width 彻底失效。
实操建议：
- 优先删掉
width，让元素保持width: auto（默认值），此时max-width才真正起作用 - 如果必须用百分比宽度，改用
width: 100%+max-width: 600px组合，但要确认父容器有明确宽度（比如display: block且未被float或position: absolute干扰） - 打开浏览器开发者工具，看 computed 样式里
width最终解析成多少——如果它大于max-width，那问题就在这里
flex 子项没设 min-width: 0
Flex 容器里的子项，默认 min-width: auto，这会阻止它被压缩到 max-width 以下，哪怕内容撑开了、哪怕父容器在收缩。结果就是：你写了 max-width: 400px，但它还是宽达 600px。
实操建议：
- 给 flex 子项显式加
min-width: 0，解除最小宽度保护机制 - 避免只写
flex: 1，改用flex: 0 1 auto（即flex-grow: 0; flex-shrink: 1; flex-basis: auto），这样max-width才能参与收缩决策 - 图片、长文本、固定尺寸按钮这类内容特别容易触发这个问题，尤其在移动端窄屏下
内容本身不可折行，max-width 形同虚设
max-width 只管容器“框”的宽度，不管里面的内容要不要换行。遇到 https://very-long-url-with-no-slashes.com/... 或一长串无空格字母（如 aaaaaaaaaaaaaaaaaa），浏览器默认当一个单词处理，拒绝折行——物理宽度直接爆掉容器，max-width 完全无效。
实操建议：
- 对可能含长 URL 或连续字符的容器，加
overflow-wrap: break-word（推荐）或word-break: break-all - 慎用
word-break: break-all在代码块里，它会让const myVariableName = 123;在任意位置断裂，调试困难 -
<pre class="brush:php;toolbar:false;"></pre>和<code>默认white-space: pre，完全禁用折行，必须覆盖为white-space: pre-wrap或white-space: pre-line才能让max-width有意义
表格和 inline 元素天然不响应 max-width
<table> 默认是 <code>table-layout: auto，列宽由内容决定，max-width 加在 <table> 上基本没用；<code>display: inline 元素（比如没设 display 的 <span></span>）也不受 max-width 约束，因为它们没有块级流式上下文。
实操建议：
- 表格要响应式，必须设
table-layout: fixed，再配合width: 100%和max-width: 800px，并确保第一行<col>或<th> 设了宽度 <li>单元格内长文本加 <code>td { overflow-wrap: break-word; }，否则单个单元格就能撑爆整表 - 想让
<span></span>响应max-width？先改成display: inline-block或display: block
真正卡住人的地方，往往不是 max-width 写错了，而是它被别的规则悄悄架空了——width、min-width、white-space、display 这些属性都在暗处牵制它。调样式时别只盯着 max-width 一行看，得拉出 computed 样式，顺着 width → min-width → white-space 这条链一路查下去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
