max-width对长单词或URL无效，因浏览器默认按单词断行，连续字符被视为不可折行单元；需配合overflow-wrap: break-word或word-break: break-all等换行控制属性才能生效。
max-width 为什么对长单词或 URL 无效
因为浏览器默认按“单词”断行，而 https://example.com/very/long/path 或 aaaaaaaaaaaaaaaaaa 这类连续字符被当作一个不可折行的单元，max-width 只限制容器宽度，不干预内部换行逻辑。
必须显式告诉浏览器：允许在字符间断行。否则内容物理宽度直接突破容器边界，max-width 形同虚设。
-
overflow-wrap: break-word（推荐）：只在必要时断词，优先保持单词完整 -
word-break: break-all：强制任意位置断行，适合纯数据展示，但会切开正常单词（如JavaScript→JavaScrip+t） - 避免用已废弃的
word-break: break-word（仅旧 IE 支持）
pre 和 code 块里 max-width 不起作用
<pre> 默认 white-space: pre，完全禁用自动换行和空白合并，内容宽度天然爆炸——哪怕加了 max-width: 600px，它也只管“内容区上限”，不管内容是否折行。
横向滚动条要出现，前提是内容物理宽度 > 容器宽度；而 pre 内容根本不折行，宽度必然超限。
立即学习“前端免费学习笔记（深入）”；
- 必须覆盖
white-space：用white-space: pre-wrap（保留换行符和空格，允许折行）或white-space: pre-line（合并空白，保留换行并折行） -
overflow-x: auto必须配合width: 100%或max-width: 100%才能触发滚动，否则容器随内容无限宽 - 慎用
word-break: break-all在代码块里：它会让const myVariableName = 123;在任意位置断裂，调试困难
表格单元格撑开整个 table
<table> 默认 table-layout: auto，浏览器先遍历所有内容算出“理想列宽”，此时 max-width 对 <td> 几乎无效——列宽由最长单元格决定，父 <table> 的 max-width 被无视。
- 给
<table>显式设table-layout: fixed，让列宽由第一行<col>或<th>的width/max-width控制 - 再配
width: 100%和max-width: 800px，表格才能整体响应式收缩 - 单元格内长文本仍需额外处理：
td { overflow-wrap: break-word; }或td { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
Flex 子项忽略 max-width
Flex 子项默认 flex-shrink: 1，但若同时设了 min-width: auto（默认值）或未设 min-width: 0，内容仍可能撑开容器——尤其当子项含图片、长文本或固定尺寸元素时，max-width 不会主动压缩。
- 显式加
min-width: 0，解除 flex 子项的最小宽度保护机制 - 避免只写
flex: 1，改用flex: 0 1 auto或明确flex-basis - 若子项是图片，必须额外加
max-width: 100%和height: auto，否则原始尺寸仍会突破
真正让 max-width 生效的，从来不是加一行 CSS，而是堵住所有可能撑开它的出口：盒模型、换行策略、布局上下文、子元素固有尺寸。最容易被跳过的，是 white-space 和 min-width: 0 这两个开关。
