flex子项max-width被长文本撑开，根本原因是默认min-width: auto锁定最小宽度；须在直接子元素上设min-width: 0，并配合white-space/overflow-wrap或white-space/overflow/text-overflow组合才能生效。
Flex子项的max-width被长文本绕过？检查white-space和word-break
设置了max-width: 600px，但一串无空格URL或base64字符串（如https://a.b/c/d/e/f/g/h/i/j/k/l/m/n/o/p/q/r/s/t/u/v/w/x/y/z）直接把容器撑宽——这不是max-width失效，而是浏览器默认按“单词”断行，而连续字符被当作一个不可折行单元。
必须显式干预换行逻辑：
-
white-space: normal（默认）对纯字符无效，它只在空格/标点处断行 -
word-break: break-all能立刻收住宽度，但可能把JavaScript切成JavaScrip+t，影响可读性 -
overflow-wrap: break-word更稳妥：只在必要时断词，优先保持单词完整（现代标准写法，取代已废弃的word-break: break-word）
Flex子项本身拒绝收缩？min-width: 0是硬开关
即使加了max-width、overflow: hidden和text-overflow: ellipsis，省略号还是不出现——根本原因是Flex子项默认min-width: auto，浏览器会优先保障内容完整显示，而不是服从父容器限制。
这个值在DevTools的Computed面板里常显示为几百像素，远超你预期。必须显式覆盖：
- 只对Flex容器的**直接子元素**生效，写在父容器或深层嵌套元素上无效
- 配合
white-space: nowrap和overflow: hidden才能触发截断逻辑 - 若子项内部还有Flex布局（比如头像+文字并列），内层容器也得单独加
min-width: 0
表格、pre标签、图片这些“特殊分子”怎么处理？
max-width在非普通块级元素上容易失灵，原因各不相同：
-
<pre class="brush:php;toolbar:false;"></pre>默认white-space: pre，完全禁用换行，此时max-width形同虚设；必须改用white-space: pre-wrap或pre-line，再配overflow-x: auto - 表格
<table>默认<code>table-layout: auto，列宽由最长单元格决定，max-width对<td>基本无效；需给<code><table>设<code>table-layout: fixed，再控制<col>或<th>宽度 <li> <code><img>没加max-width: 100%和height: auto，会无视父容器尺寸强行渲染原始宽高，引发横向滚动条 - 用
flex: 1 1 0，表示“从零开始均分空间”，比flex: 1更利于约束宽度 -
flex: 0 0 auto适合固定宽度卡片类子项，配合max-width硬性截断，避免justify-content: space-between导致末行拉伸 - 慎用
width和flex混写，尤其在iOS Safari中易触发渲染冲突
flex: 1和flex-basis怎么选？别让基础宽度拖后腿
flex: 1等价于flex: 1 1 auto，其中flex-basis: auto会让浏览器先按内容宽度计算初始尺寸——这正是撑开的源头。想压制内容，得从起点切断：
真正卡住人的，从来不是max-width写不写，而是它加在哪一层、是否配合了min-width: 0、white-space、overflow-wrap这些配套约束——漏掉任意一环，撑大问题照旧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
