max-width不生效的主因是父容器尺寸约束压制了子元素限制；需检查父级是否设固定宽、flex拉伸或table布局，并配合min-width:0、fit-content或table-layout:fixed等方案解决。
max-width 不生效？检查父容器是否设置了固定宽度
很多情况下 max-width 看起来“没用”，其实是父元素用了 width: 100% 或具体像素值，把子盒子强行撑开了。浏览器会优先满足父容器的尺寸约束，max-width 只在内容自然宽度超过它时才起作用。
- 常见错误现象：
div内放了一张大图或长文本，设置了max-width: 600px却依然溢出容器 - 真实原因：父级有
width: 100vw或display: flex默认拉伸行为，压制了max-width - 实操建议：给父容器加
min-width: 0（对 flex item）或改用width: fit-content（需兼容性评估） - 兼容性影响：IE11 支持
max-width，但不支持fit-content；移动端 Safari 对max-width在table内表现略怪
文字换行和图片溢出要分开处理
max-width 控制的是盒模型的宽度上限，但不会自动让内部文字折行、图片缩放——这是两个独立问题。
- 长英文/URL 溢出：必须配合
word-break: break-word或overflow-wrap: break-word - 图片超出：单靠
max-width: 100%不够，得加height: auto防止变形，再补上display: block消除底部空白 - 示例：
.content { max-width: 600px; }<br>.content img { max-width: 100%; height: auto; display: block; }<br>.content p { overflow-wrap: break-word; }
响应式场景下 max-width 和 width 混用容易冲突
比如同时写 width: 100% 和 max-width: 768px，在小屏下可能因父容器窄于 768px，导致实际宽度被 width: 100% 主导，max-width 形同虚设。
- 正确做法：优先用
max-width+width: 100%组合，而不是反过来 - 更稳妥写法：
width: min(100%, 768px)（现代浏览器），或媒体查询分段控制 - 性能提示：频繁改变视口宽度时，
min()函数比媒体查询触发重排更轻量，但 iOS Safari 15.4 之前不支持
表格单元格里 max-width 失效怎么办
表格布局（table、td）有自己的一套尺寸计算逻辑，max-width 在默认 table-layout: auto 下基本无效。
- 根本原因：表格列宽由内容最长项决定，
max-width不参与这个算法 - 解决路径一：强制
table-layout: fixed，然后给th/td设width或max-width - 解决路径二：把内容包一层
div，对这个内层设max-width+overflow: hidden - 注意点：设
table-layout: fixed后，第一行th的width会决定整列宽度，后续行不再影响
max-width 在 flex 容器子项中需要配合 min-width: 0 才能真正生效——尤其当内容含未换行文本或图片时，这个组合缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
