overflow:hidden失效的根本原因是Flex子项默认min-width:auto阻止收缩，需设min-width:0解除锁定，再配合width约束和text-overflow等才能生效。
flex子项内容溢出时，overflow:hidden为什么经常失效
因为overflow作用在**容器**上，但 flex 子项（比如文字、图片）默认有min-width: auto，会拒绝被压缩到比内容更小——哪怕你给父容器加了overflow: hidden，子项仍强行撑开容器，导致隐藏无效。
常见现象：卡片里一段长文本没换行，右边直接顶破边框；或图片+文字组合后整体宽度爆表，横向滚动条出现，overflow: hidden完全不拦。
- 先确认父容器是否设了
display: flex且flex-direction: row（默认），此时主轴是水平方向，min-width: auto就起效 - 对溢出子项（如
<p>或<span>）加min-width: 0，这是解除替换元素/内联元素“抗压缩”行为的关键一步 - 再配合
overflow: hidden+text-overflow: ellipsis（仅对单行文本）或white-space: nowrap控制换行逻辑 - 若子项是图片，不能只靠
overflow: hidden——得先用flex-shrink: 0或min-width: 0松动其尺寸锁定，否则它仍会撑宽容器
给flex容器加overflow:hidden前必须检查的三件事
加了overflow: hidden却还看到溢出，大概率是下面某个条件没满足：
- 父容器没有明确的
width或max-width（比如只写了flex: 1但外层没约束宽度，容器本身已无限宽） - 子项用了
white-space: nowrap但没配overflow: hidden，或者配了但没设width——overflow只对有尺寸限制的块级盒生效 - 子项是
img且没处理flex-shrink，此时overflow: hidden只能裁掉边缘，无法阻止容器被撑大（容器宽度由 flex 计算得出，不是由内容自然流决定）
文字溢出截断：flex场景下text-overflow:ellipsis的硬性前提
text-overflow: ellipsis在 flex 布局里不是加了就生效，它依赖三个样式同时存在，缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap（禁止换行） -
overflow: hidden（隐藏溢出部分） -
width或max-width（必须有明确宽度限制，不能是auto或靠 flex 自适应撑出来）
在 flex 容器中，第三点最容易漏：如果文字所在元素是flex: 1，它会占满剩余空间，但这个“剩余空间”可能随内容变化而波动，width仍是auto。稳妥做法是给该元素显式加min-width: 0（解除min-width: auto锁定），再配合width: 0触发 flex 的“收缩优先”计算逻辑，最后text-overflow才能正常工作。
图片+文字并排时，overflow:hidden为何只裁图片不裁文字
因为图片是替换元素，默认min-width: auto，而文字是普通内联内容，受white-space和width共同影响。当两者同在 flex 容器中，图片会优先占据固有宽度，文字则被 flex 挤压到最小可换行宽度——但若没设min-width: 0，文字容器反而会被撑开。
- 给图片加
flex-shrink: 0或min-width: 0，避免它主导宽度分配 - 给文字容器（如
<div class="text">）加min-width: 0+overflow: hidden+text-overflow: ellipsis，再确保它有width上下文（比如flex: 1且父容器宽度可控） - 不要对整个 flex 容器设
overflow: hidden来“一锅端”，容易误裁交互区域（如按钮、下拉箭头）
真正容易被忽略的是：min-width: 0不是锦上添花，它是让overflow在 flex 场景下生效的底层开关——没它，其他所有裁剪控制都建立在沙堆上。
