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 形同虚设。

常见诱因包括：

• 没配 max-width: 100% 和 height: auto
• 没加 table-layout: fixed

  没设 white-space: pre-wrap
  长英文单词或 URL 没加 overflow-wrap: anywhere

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

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

  

  CSS工具箱(专业版)

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

  下载
  • 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 更友好）
  • ：需同时设 max-width: 100%、height: auto，且父容器要有明确宽度
  ：必须加 table-layout: fixed，否则 max-width 对整个 table 无效

  ：加 white-space: pre-wrap 才能换行

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！