flex子项不收缩的主因是默认min-width:auto锁定最小宽度，须在直系flex子项上显式设min-width:0，并配合white-space、overflow、text-overflow三者才能实现有效截断。
flex子项不收缩？先查min-width: auto默认行为
移动端视频控制栏在小屏下挤成一团、文字重叠、按钮错位，八成是因为按钮或文字容器被min-width: auto锁死了最小宽度——浏览器认为“内容多宽，我就得多宽”，哪怕是一长串无空格URL或连续英文，它也拒绝压缩，直接撑破父容器。
这不是bug，是CSS规范明确规定的默认行为。解决的关键不是给flex: 1加权重，而是显式覆盖这个底线：
-
min-width: 0必须加在**直系 flex 子项**上（比如.control-btn、.progress-bar、.time-text），不是父容器 - 如果子项内部还有flex结构（如带图标+文字的音量控件），内层容器也得加
min-width: 0，否则溢出会“穿透”进来 - 别混用
width: 100%和flex: 1，它们语义冲突；改用flex: 1 1 0更可控
加了min-width: 0还是溢出？检查截断三件套是否齐备
min-width: 0只是“解锁”了收缩能力，它不会自动让文字变省略号。要真正截断，必须同时满足三个条件：
-
white-space: nowrap（单行）或overflow-wrap: break-word（多行换行） -
overflow: hidden（否则溢出内容仍可见） -
text-overflow: ellipsis（仅对nowrap生效）
常见错误是只加了min-width: 0和overflow: hidden，结果文字全挤成一行跑出屏幕外。比如时间显示.time-text，正确写法是：
.time-text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
横向滚动控制栏怎么避免iOS Safari卡顿？
用flex实现控制栏横向滚动时，很多人以为flex-wrap: nowrap就完事了。其实它只禁掉折行，不解决子项本身宽度失控的问题。
- 滚动容器必须设
overflow-x: auto+ 明确宽度（如width: 100%或max-width: 375px） - 每个子项推荐用
flex: 0 0 auto（不放大、不缩小、按内容宽） +min-width: 0 - iOS Safari卡顿？加
-webkit-overflow-scrolling: touch虽能提速，但会让position: fixed子元素错位；更稳的做法是禁用它，改用原生滚动 - 左右边缘被切？确认滚动容器用了
box-sizing: border-box，否则padding会算进width导致实际可用空间不足
嵌套flex场景下容易漏掉哪一层？
复杂控制栏（比如带头像、标题、操作按钮的顶部栏）里，溢出往往藏在“缝隙”里：.top-bar → .title-row → .title-text，只要参与flex分配，就可能需要min-width: 0。
最常被忽略的是那些看起来“只是容器”的中间层——比如一个display: flex的图标文字组合，它自己没内容，但它的子项一旦有长文本，就会把整条链撑开。
小屏下尤其危险：固定值如min-width: 200px在375px屏宽上直接撑开；优先用min-width: 0 + 媒体查询微调，或配合clamp()设弹性边界。
真正影响体验的，从来不是加不加flex，而是每一层是否都主动放弃了“内容多宽我就多宽”的默认执念。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
