max-width在flex子项上不生效，是因为默认min-width: auto将最小宽度锁定为内容固有尺寸，必须显式设置min-width: 0才能激活max-width的限制作用。
max-width 在 Flex 子项上不生效，不是 CSS 写错了，而是被 Flex 的默认行为“绕过”了——它根本没机会介入尺寸计算。
为什么 flex 子项的 max-width 常常被忽略
Flex 容器默认给子项设了 min-width: auto，这会把子项的最小宽度锁在内容固有尺寸（比如图片原始宽、长文本不折行宽度）上。哪怕你写了 max-width: 400px，浏览器也会优先保证“不小于内容本身”，结果就是元素撑开、溢出、响应式断裂。
- 常见错误现象：
max-width: 100%的图片在窄屏下仍横向滚动；max-width: 600px的卡片在移动端宽达 800px - 这不是 bug，是规范行为：替换元素（
img、video）和文本块都受此约束 - 开发者工具里看 computed 样式，如果
min-width显示为auto或一个具体像素值（如320px），基本就定位到根因了
必须加 min-width: 0 才能激活 max-width
显式重置这个“保护机制”，max-width 才真正获得控制权。尤其对 img 和 video 这类替换元素，min-width: 0 是刚需，不是可选项。
- 只写
max-width: 100%不够，必须配min-width: 0—— Safari 和部分 Chrome 版本不加它就无效 - 如果子项还用了
flex: 1，建议改用flex: 0 1 0（即flex-grow: 0; flex-shrink: 1; flex-basis: 0），让基准从零开始，避免固有尺寸干扰 - 对
video，还需包裹一层容器并设aspect-ratio，否则仅靠min-width: 0+max-width无法保比例
width 和 max-width 同时存在时谁说了算
width 是硬指令，max-width 是守门员——只有当 width 的计算结果超过 max-width 时，后者才出手。但多数时候，width: 100% 算出来是 500px，而你设了 max-width: 400px，结果仍是 500px，因为 width 没超限，max-width 直接旁观。
- 调试关键：打开开发者工具 → Computed → 查看
width实际解析值。如果它大于max-width，说明width在抢控制权 - 安全写法：
width: 100%; max-width: 600px;只在父容器有明确宽度时可靠；更稳妥的是删掉width，只留max-width，让元素保持width: auto - 特别注意 HTML 内联
width属性（CMS 或旧代码残留），它的优先级高于外部 CSS，会直接覆盖你的max-width
Grid 和表格场景下的等效处理
Grid 子项同样默认 min-width: auto，所以 max-width 同样失效。表格（table 元素）则根本不响应 max-width，哪怕加了 min-width: 0 也无用。
- Grid 列定义别只写
1fr，改用minmax(0, 600px)或clamp(320px, 50%, 960px)，把上限逻辑写进轨道定义里 - 表格要限制宽度，只能在外层套一个
div并设max-width+overflow-x: auto，表格自身设width: 100% - Element UI/Ant Design 的
table组件嵌在 flex 里时，同理需额外包裹，并确保包裹层有明确宽度参照
真正难的不是写上 max-width，而是确认它在哪一层布局上下文中被允许执行——Flex 的 min-width: auto、Grid 的轨道分配、表格的固有算法，都会在你没察觉时把它挡在门外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
