text-overflow: ellipsis在Flex中失效的根本原因是子项默认min-width: auto锁死收缩，必须在直接参与Flex排列的块级子元素上显式设min-width: 0（无单位），并同级配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束。
Flex子项默认min-width: auto锁死收缩能力
不是text-overflow: ellipsis坏了，而是浏览器根本没让它触发——Flex子项默认带min-width: auto，意思是“至少得容下最长单词或整段URL”，哪怕父容器只有100px宽，它也拒绝缩窄。结果overflow: hidden没东西可裁，text-overflow: ellipsis自然静默。
常见现象包括：
- 文字把整个Flex容器顶宽，甚至导致横向滚动
- DevTools的Computed面板里
min-width仍显示为auto（不是0px） - 同一段CSS挪到普通
div里立刻正常，一放进Flex就失效
必须在**直接参与Flex排列的子元素**上加min-width: 0，且只能用无单位写法：min-width: 0（min-width: 0px或min-width: 0%在Firefox中不可靠）。
三件套必须同级、同块、同元素
white-space: nowrap、overflow: hidden、text-overflow: ellipsis这三者缺一不可，且必须全部落在**最终承载文本的块级元素上**，不能拆开写在不同层级。
这个元素还需满足：
- 是块级：
display: block或display: inline-block（span默认不行，得显式改） - 有明确宽度约束：
max-width: 100%、width: 200px或来自flex-basis - 不能被内部
display: flex或display: table干扰——这些显示类型自带最小宽度逻辑，优先级高于min-width: 0
典型错误写法：.item { min-width: 0; } + .item > .flex-inner { flex: 1; } + .flex-inner > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }——漏了min-width: 0在span上，且span仍是行内元素。
嵌套Flex场景下容易漏掉的min-width: 0
真实项目里，失效常发生在多层嵌套中。比如：.card { display: flex; } → .info { display: flex; } → .text。这时min-width: 0要加三层：
-
.card > .info（Grid Item 或 Flex 直接子项） -
.info本身（内层Flex容器） -
.info > .text（最终文本块，还得配齐white-space: nowrap等三件套）
如果.text还设了flex-shrink: 0，min-width: 0会被无视——删掉或改成flex-shrink: 1。
长单词（如JWT token、日志ID）仍会绕过text-overflow撑开容器，此时需兜底：overflow-wrap: break-word处理语义断点，word-break: break-all防死循环。
Grid + Flex嵌套时高度/宽度双失控
Grid容器里放Flex子元素，“失效”90%是因为Flex容器没拿到可伸缩空间，不是display写错了。
必须同时检查：
- Grid容器自身有明确高度（如
min-height: 400px） - Grid Item（即Flex容器的直接父元素）加
min-height: 0或height: 100% - Flex容器自己也要加
min-height: 0（Chrome下尤其关键） - 两层都缺
min-width: 0：Grid Item 和它内部的Flex容器都要加
若Grid轨道固定高度（如grid-template-rows: 100px），Flex内容超限会直接消失。应改用minmax(100px, auto)或加overflow: auto，且所有子项需有min-width: 0和box-sizing: border-box。
真正容易被忽略的，不是“怎么写”，而是“谁在控制宽度”——父容器是否flex/grow、是否设置了min-width、是否用了fit-content，这些都会悄悄破坏宽度约束，让整个组合失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
