图片在flex容器中撑破父容器需同时设置img{max-width:100%;height:auto;flex:1 1 0}，因flex默认行为会忽略max-width，必须通过flex-basis:0重置基准尺寸并启用缩放。
flex容器里图片撑破父容器怎么办
直接给图片加 max-width: 100% 是对的，但光这样经常没用——因为 flex 默认会让子元素“尽可能伸展”，max-width 在 flex 项上会被忽略，除非你同时控制它的 flex 缩放行为。
- 必须配合
flex-shrink: 1（或更常见的写法是flex: 1/flex: 0 1 auto），否则图片按原始尺寸渲染，max-width不触发 - 如果图片是
<img>标签，还要确保它没被设成display: block以外的值（比如意外继承了display: inline，会多出底部空白并影响盒模型） - 父容器得有明确宽度（比如
width: 300px或max-width: 100%），否则100%没参照物
为什么img { max-width: 100% }单独写无效
Flex 项的默认 flex 值是 0 1 auto，其中第二个值 1 表示“允许收缩”，看似没问题。但图片作为替换元素（replaced element），其固有尺寸优先级高，浏览器在 flex 分配阶段可能先按原始宽高布局，再应用 max-width，导致时机错位。
- 更稳妥的做法是显式写
flex: 1或flex: 0 1 0，把基准主轴尺寸设为0，强制它从父容器“抢”空间再限制 - 不要只依赖
width: 100%，它和max-width行为不同：前者强制拉满，后者是上限；图片场景下max-width更安全 - 某些旧版 Safari 对
img在 flex 中的max-width支持不稳定，加min-width: 0能兜底（防止 flex 项最小宽度被设为内容宽度）
实际能抄的最小可用组合
以下三行缺一不可，贴到项目里基本能解决 90% 的 flex 图片溢出：
img {
max-width: 100%;
height: auto;
flex: 1 1 0;
}
-
flex: 1 1 0等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，让图片放弃原始宽度，从零开始分配空间 -
height: auto必须跟上，否则宽缩了但高不变，图片严重变形 - 如果父容器是
display: flex; flex-direction: column，那要改的是高度约束：max-height: 100%+flex: 1 1 0+width: auto
遇到object-fit时别混用max-width
如果你已经用了 object-fit: cover 或 contain，再套 max-width 就多余了——object-fit 本身就在控制内容如何适应容器，此时重点该放在容器尺寸和 flex-basis 上。
-
object-fit只对替换元素生效（img、video），对背景图无效 - 想让图片居中裁剪又不溢出，容器需设
overflow: hidden，否则object-fit: cover的超出部分仍可见 - Flex 容器里用
object-fit时，flex-basis建议设具体值（如flex: 0 0 200px），避免因内容尺寸波动导致布局抖动
flex-basis 和 width 实际值，比猜更可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
