max-width 在 Flex 子项中失效是因 min-width: auto 和 flex-shrink: 1 共同压制；需显式设 min-width: 0 并用 flex: 0 0 300px 替代仅设 max-width，同时对 img、table、pre、长文本等单独处理。

max-width 在 Flex 子项中不是被“忽略”，而是被默认的 min-width: auto 和 flex-shrink: 1 联合压制——它根本没机会触发。

为什么 DevTools 里写了 max-width 却看到盒子被撑开

打开 Computed 面板，重点看三项：min-width、width、flex-basis。如果 min-width 显示为 auto（不是 0 或 0px），那基本就是它在锁死尺寸。哪怕你写了 max-width: 300px，只要子项里有一段长 URL 或未折行的代码块，浏览器就会按内容固有宽度撑开到 500px+，max-width 形同虚设。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

常见诱因包括：

• <img alt="为什么CSS Flex子项的max-width属性在某些情况下会被忽略" > 没配 max-width: 100% 和 height: auto
• <table> 没加 <code>table-layout: fixed
• <pre class="brush:php;toolbar:false;"></pre> 没设 white-space: pre-wrap
• 长英文单词或 URL 没加 overflow-wrap: anywhere

flex: 0 0 300px 是最稳妥的写法

只写 max-width: 300px 不够，必须切断 Flex 默认的压缩链路。推荐用三值语法显式控制起点：

立即学习“前端免费学习笔记（深入）”；

• 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: 0 0 50% 前，先确认父容器 Computed → width 是明确像素值（比如不是 0px）

min-width: 0 必须显式写，且只对直接子元素生效

min-width: 0 是让 max-width 生效的开关，但要注意：

• 必须写在 Flex 容器的**直接子元素**上，嵌套再深一层就无效
• 不能写成 min-width: 0px 或 min-width: 0%，必须是无单位的 0
• 按钮、输入框等交互控件慎用全局 min-width: 0，可能破坏其默认最小可点击尺寸
• 若同时设了 flex-shrink: 0，min-width: 0 仍有效；但若写了 flex-shrink: 0 却漏掉 min-width: 0，盒子依然会被内容撑开

长文本、图片、表格这些“静默破坏者”要单独处理

即使 min-width: 0 和 flex 写对了，以下内容仍会绕过限制：

• 连续长英文或 URL：必须加 overflow-wrap: anywhere（比 word-break: break-all 更友好）
• <img alt="为什么CSS Flex子项的max-width属性在某些情况下会被忽略" >：需同时设 max-width: 100%、height: auto，且父容器要有明确宽度
• <table>：必须加 <code>table-layout: fixed，否则 max-width 对整个 table 无效
• <pre class="brush:php;toolbar:false;"></pre>：加 white-space: pre-wrap 才能换行

真正容易被忽略的是：这些子元素的尺寸规则和父级 max-width 是解耦的，它们各自守着自己的“固有宽度”，不主动让步。