flex容器中max-width不生效，主因是flex-shrink:1默认启用导致强制压缩；需设flex-shrink:0并配合flex-basis（如flex:0 0 auto）才能使max-width生效，同时注意flex-grow、min-width及box-sizing的影响。
flex容器里max-width不生效，大概率是flex-shrink在“抢控制权”
Flex项目默认开启收缩（flex-shrink: 1），只要容器空间不足，它就会无视max-width强行压缩。这不是bug，是Flex的默认行为设计：优先满足容器布局约束，再考虑子项自身限制。
flex-shrink: 0才是让max-width真正起效的关键
想让max-width管用，必须显式关闭收缩能力。只设flex-shrink: 0还不够，要配合flex-basis明确基准尺寸，否则浏览器可能按content或auto推算，导致行为不稳定：
-
flex: 0 0 auto→ 允许按内容宽，但不缩不伸，max-width生效 -
flex: 0 0 200px→ 基准为200px，不缩不伸，max-width在200px之上才起作用 - 单独写
flex-shrink: 0也行，但务必确认flex-basis不是auto（尤其当元素有width时，flex-basis会继承它）
别忽略min-width和flex-grow的连锁影响
即使关了flex-shrink，如果同时开了flex-grow: 1，项目仍可能撑满剩余空间，把max-width顶穿。此时需检查：
- 是否误用了
flex: 1（等价于flex: 1 1 0，既可伸又可缩） -
min-width是否比max-width还大，造成逻辑冲突 - 父容器是否设置了
flex-wrap: wrap，而你期望单行——换行后宽度重算，max-width表现会变
用overflow和box-sizing验证真实渲染宽度
有时你以为max-width没生效，其实是内容溢出或盒模型干扰：
- 给元素加
outline: 1px solid red，直接看边界是否卡在max-width处 - 检查
box-sizing：若为content-box（默认），padding/border会额外撑宽，导致视觉上突破max-width - 文本类内容记得配
overflow: hidden; text-overflow: ellipsis; white-space: nowrap，否则长文本会撑破限制
Flex下max-width失效，本质是弹性行为与固定限制的优先级冲突。真正要调的不是max-width本身，而是flex-shrink、flex-basis和flex-grow三者的组合策略。漏掉任意一个，都可能让样式看起来“不听话”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
