应设 flex-basis: 0 并配合 overflow: hidden/auto、max-width: 100%、min-width: 0；因 flex 主轴计算先于 overflow 裁剪，仅设 overflow 无效，flex-basis: 0 才能确保 flex-grow 正常分配空间。
flex容器里图片撑开父容器怎么办
直接给 flex-basis: 0，再配 overflow: hidden 或 overflow: auto —— 这是多数情况下的解法，不是“试试看”，而是必须同时满足这两个条件才稳。
常见错误是只加 overflow: hidden，但图片仍溢出：因为默认 flex-basis 是 auto，浏览器会优先按图片原始尺寸计算主轴空间，overflow 压根没机会生效。
-
flex-basis: 0强制从零开始分配主轴空间，让flex-grow真正起作用 - 搭配
flex-grow: 1才能均分剩余空间；如果没设flex-grow，flex-basis: 0反而会让元素缩成一条线 - 图片需额外设
max-width: 100%，否则在flex-basis: 0下可能被拉伸变形（尤其object-fit未设时）
为什么 overflow: hidden 在 flex 里经常失效
根本原因：CSS Flex 的主轴尺寸计算发生在 overflow 裁剪之前。浏览器先按 flex-basis + flex-grow + 内容固有尺寸算出最终宽度，再决定是否触发裁剪。如果这一步算出来的宽已经超了容器，overflow: hidden 才管用；但如果 flex 项自己“主动”占满整行（比如图片没限制宽高），裁剪就晚了。
- 典型失效场景：
img直接放在display: flex容器里，没设flex-basis，也没设max-width - 验证方法：打开 DevTools，看该 flex 项的 computed
flex-basis—— 如果是auto或具体像素值（比如320px），而不是0px，大概率要调 - 注意
min-width: auto（Flex 默认值）会阻止收缩，必要时可显式设min-width: 0配合flex-basis: 0
flex-basis: 0 和 width: 0 的区别在哪
flex-basis: 0 是 flex 专用的“主轴基准尺寸”，它不等于把元素压扁，而是告诉 flex 布局：“别看内容多大，先按 0 分配基础空间，后续靠 grow/shrink 调”。而 width: 0 是盒模型层面的强制归零，会直接抹掉元素显示（除非有 flex-grow 拉伸回来）。
-
flex-basis: 0+flex-grow: 1→ 元素参与等比拉伸，图片按比例缩放 -
width: 0+flex-grow: 1→ 效果看似一样，但语义错乱，且在某些旧版 Safari 中表现不稳定 - 绝对不要混用：
flex-basis: 0和width同时设，前者会被后者覆盖（取决于 display 类型和规范版本）
移动端图片溢出的兼容性补漏点
iOS Safari（尤其是 15.x 之前）对 flex-basis: 0 处理偏保守，遇到 img 仍可能溢出。这时候得加一层防御：
- 给图片加
align-self: flex-start（避免 stretch 拉伸） - 外层 flex 项设
min-width: 0（Safari 对 min-width 的默认处理更激进） - 若容器有
padding，确保box-sizing: border-box已生效，否则 padding 会挤占 flex 可用空间，间接导致溢出 - 慎用
object-fit: cover配合flex-basis: 0—— 某些安卓 WebView 会忽略裁剪，优先保证图片完整显示
最硬的兜底：图片外再包一层 <div style="overflow: hidden">，虽然多一层 DOM，但比调试 flex 行为省时间。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
