max-width 在 flex 子项中未失效，而是被默认 min-width: auto 和 flex-shrink: 1 联合绕过；需显式设 min-width: 0 并配合 flex: 0 0 300px 等合理 flex 值才能使其生效。
因为 max-width 在 flex 子项中不是“失效”，而是被默认的 min-width: auto 和 flex-shrink: 1 联手绕过——它根本没机会起作用。
flex 子项的 min-width: auto 是最大干扰源
浏览器给每个 flex 子项默认加了 min-width: auto，它的实际含义是：子项至少要撑到内容的固有宽度（比如一长串 URL、未折行的代码块、或一张原图）。哪怕你写了 max-width: 300px，只要内容固有宽度是 500px，这个子项就会被撑到 500px，max-width 形同虚设。
调试时进 DevTools 的 Computed 面板，重点看 min-width 这一项——如果显示的是 auto 或一个远大于你预期的像素值（比如 482px），那就确认是它在作祟。
- 必须显式写
min-width: 0才能解除这个默认兜底 - 只对 flex 容器的**直接子元素**生效，嵌套层级里写无效
- 按钮、输入框等交互控件慎用全局
min-width: 0，可能破坏默认最小尺寸
flex 属性三值写法决定 max-width 是否有机会介入
默认 flex: 0 1 auto 中的 flex-shrink: 1 会让子项主动压缩，但压缩逻辑优先服从 min-width: auto，而不是 max-width。想让 max-width 真正生效，得切断这个压缩链路或重置起点。
立即学习“前端免费学习笔记（深入）”；
- 推荐写
flex: 0 0 300px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 300px） - 避免
flex: 1或flex: 1 1 0——第三个值为0会让flex-basis清零，width和max-width全部被忽略 - 若用百分比
flex-basis（如flex: 0 0 50%），先确认父容器 Computed 的width是你预期的值（比如不是0px）
长文本、图片、表格等特殊内容需额外处理
即使 min-width: 0 和 flex 写对了，长单词、URL、<pre>、<table> 或 <img> 仍会把盒子撑开，因为它们各自有独立的尺寸规则。
- 长文本/URL：配
overflow-wrap: anywhere（比word-break: break-all更友好） -
<pre>：加white-space: pre-wrap -
<table>：必须加table-layout: fixed，否则max-width无效 -
<img>：需同时设max-width: 100%和height: auto，且父容器要有明确宽度
调试时最该盯住的三个 Computed 值
别光看 Styles 面板里写了什么。打开 Computed，逐项确认：
-
box-sizing是否为border-box（尤其当用了padding时，影响实际可分配空间） -
min-width是否已变成0（注意不是0px，就是字面量0） - 临时加
outline: 1px solid red看真实渲染边界——横向滚动条还在？说明物理宽度仍 > 父容器
真正难的不是写对那行 max-width，而是搞清它在哪一层被 min-width: auto、flex-shrink 或内容固有尺寸悄悄拦截了。
