flex子项需显式设min-width: 0才能收缩，因其默认min-width: auto会阻止截断；该声明仅对flex容器的直接子元素生效，且需配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis。
Flex子项被内容撑开，不是CSS写错了，而是浏览器默认给它加了min-width: auto——必须显式设min-width: 0才能解锁收缩能力。
为什么只加overflow: hidden和text-overflow: ellipsis没用
你写了white-space: nowrap、overflow: hidden、text-overflow: ellipsis，但省略号就是不出现。这不是属性失效，而是容器本身已被长文本（比如一串无空格的URL或base64）撑宽，导致溢出部分根本不在可视区域内。overflow: hidden确实“藏”了内容，但用户看不到省略号，因为整个盒子变大了。
-
min-width: auto在Flex中等价于min-content，浏览器会优先保障内容完整显示，而不是服从父容器宽度 - DevTools里查Computed值，常看到
min-width被解析成几百像素，远超你预期 - 仅靠
overflow类规则，无法触发截断逻辑——收缩开关还没打开
必须把min-width: 0加在哪个元素上
这个声明只对display: flex容器的**直接子元素**生效，写错位置等于白写。
- ✅ 正确：父容器
.container { display: flex; }，子元素.title { min-width: 0; } - ❌ 错误：给
.container加min-width: 0，或给.title > span加（除非span显式设display: block） - ⚠️ 嵌套Flex场景要逐层加：如果
.desc内部还有display: flex的头像+文字块，那内层容器也得单独加min-width: 0 - 调试时务必在DevTools的Computed面板确认
min-width真实值是否已变成0px，别只看Styles面板里的声明行
flex: 1和flex: 1 1 0在溢出控制上的关键差异
flex: 1等价于flex: 1 1 auto，其中flex-basis: auto会让浏览器先按内容宽度计算初始尺寸，再缩放——这正是撑开的源头。
-
flex: 1 1 0把flex-basis设为0，意味着“从零开始均分空间”，更利于压制内容撑开 - 用
flex: 1 1 0时，min-width: 0通常可以省略（因为基础宽度已是0），但建议仍显式保留，避免Safari旧版本兼容问题 - 若子项需保留最小可用宽度（如按钮不能压太扁），改用
flex: 1 1 200px，别用0 - 注意
flex-shrink: 0会彻底关闭收缩能力，和min-width: 0冲突，务必检查并移除
移动端和flex-direction: column下的特殊约束
横向Flex下，min-width: 0主要影响主轴收缩；但在竖排布局中，文本截断仍发生在行内方向（水平），所以：
- 目标子项必须自己设
max-width: 100%或具体值，否则即使加了min-width: 0，它也会按内容无限延展 - 别指望
flex: 1在column下自动约束水平宽度——它只管垂直方向伸缩 - UI框架（如uni-app的
<view></view>、Vant的van-cell）可能自带white-space: nowrap，得手动覆盖 - 响应式场景慎用固定
min-width（如min-width: 200px），小屏下反而加剧溢出
真正难的不是记住min-width: 0这行代码，而是每次遇到溢出都得顺藤摸瓜查四件事：父容器有没有max-width、子项是不是flex直接子、min-width是否被其他规则覆盖、以及flex-basis是不是还卡在auto上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
