flex项目溢出时overflow不生效，根本原因是父容器未设display: flex或缺少宽高约束；text-overflow需white-space: nowrap、overflow: hidden、display: block三者齐备；图片推荐用object-fit；关键破局点是子项加min-width: 0。
flex项目溢出时overflow不生效？先看父容器是否设了display: flex
很多情况下你给子元素加了overflow: hidden，文字或图片还是撑开容器——根本原因不是子项写错了，而是父级flex容器没限制自身尺寸。Flex布局里，overflow只对「有明确边界」的块起作用，而默认的flex容器是无限伸缩的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确的宽高约束，比如
width: 300px、max-width: 100%，或嵌套在另一个有尺寸限制的容器中 - 如果父容器是
flex且方向为row，通常要限制width；方向为column则优先限制height - 别只盯着子项加
overflow，先确认父容器是不是“飘着”的
text-overflow: ellipsis在flex里失效？得配齐三件套
单行文字截断加省略号，在flex子项里特别容易失败。不是text-overflow有问题，而是它依赖三个前提同时满足，缺一不可。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 子项必须是块级（或
display: block），inline元素不支持text-overflow - 必须有
white-space: nowrap，否则文字会换行，不会触发溢出 - 必须有
overflow: hidden，这是触发截断的开关 - 示例：
.item {<br> white-space: nowrap;<br> overflow: hidden;<br> text-overflow: ellipsis;<br>}
flex子项图片溢出被裁剪？object-fit比overflow更可控
直接对<img alt="CSS弹性盒子中的内容裁剪_使用overflow控制flex项目的溢出" >设overflow: hidden无效——因为img是替换元素，它的渲染不受父容器overflow影响（除非父容器是block且有显式尺寸）。这时候该用object-fit来控制内容如何适应容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
img设为display: block，再包裹一层有固定尺寸的div，对该div设overflow: hidden - 更推荐：直接给
img加object-fit: cover或object-fit: contain，配合width/height约束 - 注意兼容性：
object-fit在IE全系不支持，如需兼容得回退到background-image方案
flex布局下min-width: 0是关键破局点
即使你设了overflow: hidden，子项仍可能不收缩——这是flex默认的min-width: auto在作怪。它会让文本类内容拒绝压缩到小于其内部最小宽度（比如一个超长单词）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对需要裁剪的flex子项，显式加上
min-width: 0（或min-height: 0，取决于主轴方向） - 这个值不是“让内容变小”，而是告诉浏览器：“允许我比内容最窄处还窄，以便
overflow能真正起作用” - 常见组合：
.truncate-item {<br> min-width: 0;<br> overflow: hidden;<br> text-overflow: ellipsis;<br> white-space: nowrap;<br>}
复杂点在于，min-width: 0和overflow必须在同一层级生效；如果中间隔着未重置min-width的祖先flex项，裁剪依然会失效。
