overflow:hidden在Flex子项上不生效，根本原因是子项默认min-width:auto（主轴row时）或min-height:auto（主轴column时），锁定最小尺寸不小于内容自然宽/高，导致“溢出”未发生；必须对flex直接子项设min-width:0（或min-height:0），并配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis及明确宽度约束才生效。
为什么 overflow: hidden 在 Flex 子项上不生效
根本不是 overflow: hidden 写错了，而是 Flex 子项默认带 min-width: auto（主轴为 row 时）或 min-height: auto（主轴为 column 时），它会锁死最小尺寸不小于内容自然宽度——浏览器宁可撑破容器，也不压缩内容。此时 overflow: hidden 根本没机会触发，因为“溢出”压根没发生。
常见现象包括：text-overflow: ellipsis 不显示、长 URL 或连续英文顶破卡片、横向滚动条意外出现、加了 white-space: nowrap 却依然换行。
DevTools 中检查 computed min-width，若仍是 auto，基本可以锁定是这个问题。
必须给哪个元素加 min-width: 0
只对 display: flex 的**直接子项**生效，且必须加在你希望截断的那一个元素上，不是父容器，也不是孙子节点。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 在动态 class（如
className={`item ${isTruncated ? 'truncate' : ''}`}）中，只把min-width: 0放在.truncate里，但该 class 没被激活 → 白写 - 子项内部是嵌套 Flex（比如头像 + 文字块 + 按钮），只在外层加了
min-width: 0，内层文字容器仍受min-width: auto锁定 - 用了
<img>或<input>这类替换元素，漏了max-width: 100%，图片/输入框照样撑宽
min-width: 0 必须搭配哪些样式才起作用
min-width: 0 只是“打开收缩开关”，不配齐其他规则，text-overflow: ellipsis 永远不会出现。
单行截断必须同时满足（四者缺一不可）：
-
min-width: 0（解除 Flex 默认锁定） -
white-space: nowrap（禁止换行，确保溢出发生在单行内） -
overflow: hidden（裁剪动作本身） -
text-overflow: ellipsis（仅渲染省略号，依赖前三个）
另外，该元素必须有明确宽度约束：来自父容器的 width/max-width，或自身设 flex-basis（如 flex: 0 1 200px）。用 flex: 1 时建议写成 flex: 1 1 0，避免 flex-basis: auto 干扰计算。
column 布局下容易忽略的关键点
主轴是垂直方向，但文本截断逻辑仍作用于**行内方向（水平）**，所以：
-
min-width: 0仍然要加——它不管高度，只影响水平收缩能力 - 真正控制高度溢出的是
min-height: 0配合overflow-y: hidden，用于多行截断场景 - 目标子项必须自己设
max-width: 100%或具体值，否则即使加了min-width: 0，它也会按文本内容无限延展 - 别指望
flex: 1在column下自动限制水平宽度——它只控制垂直伸缩
最常被跳过的其实是父容器有没有宽度约束；没有 width 或 max-width，整个 Flex 容器就是无限宽，子项再怎么缩也没意义。
