max-width生效需width有实际计算值；块级元素默认width:auto时max-width仅作上限；Flex子项需min-width:0才能触发收缩；inline、table等元素需额外样式支持；长文本需word-break等配合。
max-width 生效的前提是 width 有实际计算值
只写 max-width: 600px，但没控制 width 的行为，它大概率不会生效。因为 max-width 是“上限”，不是“目标宽度”——它只在元素当前计算出的 width 超过该值时才介入裁剪。
常见错误现象：
- 块级元素默认
width: auto，此时它会撑满父容器，max-width只是“天花板”，不主动收缩 - 父容器本身无宽度约束（如未设
width的<body>或浮动父级），子元素即使写了max-width，也可能被长单词、图片或表格内容顶开 - 在 DevTools 的
Computed面板里检查width的「used value」：如果是auto或大于600px的像素值，说明max-width没触发
Flex 子项中 max-width 常被 flex-shrink 和 min-width 干扰
Flex 容器里，子项默认有隐式 min-width: auto（尤其含文字、URL、<span> 等内联内容），这会锁死最小尺寸，让 max-width 失效。
必须显式覆盖才能让它真正起作用：
立即学习“前端免费学习笔记（深入）”；
- 加
min-width: 0—— 这是 flex 收缩的“开关”，不加就基本无效 - 搭配
flex-shrink: 1和width: 0（或flex-basis: 0）更稳妥 - 避免只依赖
flex: 1，它等价于flex: 1 1 0%，但浏览器仍可能按内容撑开
某些 display 类型和元素类型天生忽略 max-width
max-width 不是万能的，它对以下情况默认不响应：
-
display: inline元素（如未设置display的<span>、<a>）—— 必须显式设为inline-block或block -
<table>默认无视max-width，需额外加table-layout: fixed - 替换元素（如
<img>、<input>）虽响应max-width，但若没配width: 100%或height: auto，可能出现拉伸/裁剪失真 - 绝对定位元素（
position: absolute）脱离文档流，max-width仍生效，但其父容器若没形成 BFC，可能无法包裹它
长内容、表格、滚动条带来的隐藏干扰
即使样式写对了，真实页面中还有几类“静默破坏者”：
- 连续长英文或 URL 不换行，直接撑宽盒子 —— 需加
word-break: break-word或overflow-wrap: break-word -
max-width: 100vw在有垂直滚动条的页面中，可能比视口还宽（vw包含滚动条宽度），应优先用max-width: 100% -
<table>内部单元格内容过长，仅靠max-width不够，还得配合white-space: normal和table-layout: fixed - 父容器用了
overflow: hidden，看似“包住了”，实则是触发了 BFC，但副作用是裁掉所有溢出内容（如position: absolute下拉框、阴影）
真正难的不是写对那行 max-width，而是确认它在哪一层被谁绕过了：是父容器没宽度？是 display 类型不对？是 flex 的 min-width: auto 锁死了？还是长文本在偷偷撑开？调试时别只盯自己写的那条规则，先看 computed 里的 width 和 display 实际值。
