必须设置min-width:0以解除flex子项默认的min-width:auto保护，再配合white-space:nowrap、overflow:hidden和text-overflow:ellipsis才能实现单行文本省略。
white-space: nowrap 本身不撑父容器，但会触发 flex 子项的 min-width: auto 保护机制
Flex 子项默认 min-width: auto，W3C 明确规定：子项“不会收缩到小于其最小内容宽度”（minimum content size）。加了 white-space: nowrap 后，长单词或整段文本无法折行，这个“最小内容宽度”就被拉高了。而 flex-shrink: 1（默认值）在尝试压缩时，一碰到这个底线就停住——结果就是子项物理宽度变大，连带撑开父容器。
这不是 nowrap 的 bug，是它和 Flex 默认行为叠加后的自然结果。
- 检查开发者工具里该子元素的 computed
min-width，大概率是某个长单词的原始宽度（比如 “UserProfileSettingsButton”） -
min-width: auto在 inline 元素、table-cell、flex item 中表现一致，但只有 flex item 容易被误认为“是 nowrap 撑的” - 如果父容器本身没设
width或max-width，溢出会直接突破视口边界，尤其在移动端明显
为什么加了 overflow: hidden + text-overflow: ellipsis 还是不生效
四件套缺一不可，且必须作用于同一元素：white-space: nowrap、overflow: hidden、text-overflow: ellipsis、min-width: 0。漏掉 min-width: 0 是最常见原因——没有它，子项根本不缩，overflow: hidden 就无内容可裁，text-overflow 更无从触发。
-
display: block或inline-block必须显式设置，span等默认display: inline不支持text-overflow -
max-width: 100%比width: 100%更安全，尤其嵌套 flex 场景下能避免父级 width 计算失效 - 用
width: 0; min-width: 0; max-width: 100%组合，比单写min-width: 0更可靠，能强制重置宽度计算起点
flex-shrink: 0 和 min-width: 0 到底该用哪个
二者解决的是不同层级的问题：flex-shrink: 0 是阻止 Flex 主轴压缩，min-width: 0 是解除子项最小宽度保护。实际中常需共存——尤其当子项内还有嵌套 flex 或文字需要截断时。
- 只设
flex-shrink: 0：子项宽度锁定为内容原始宽度，可能仍溢出；适合按钮等“宁可换行也不压缩”的场景 - 只设
min-width: 0：子项可缩，但若没配overflow系列属性，缩完的内容直接被裁掉，用户看不到省略号 - 推荐组合：
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap，再按需加flex-shrink: 0控制是否允许进一步收缩
移动端按钮文字撑开容器的典型修复链
移动端按钮溢出本质是布局约束缺失，不是文字太长。关键要切断“内容宽度 → 子项最小宽度 → 父容器宽度”的传导链。
- 按钮自身加：
flex-shrink: 0; white-space: nowrap; min-width: 0 - 按钮父容器（flex 容器）必须有明确宽度约束，如
max-width: 100vw或width: 100%，不能只靠flex: 1 - 若按钮内是
span，需额外加display: inline-block和box-sizing: border-box，否则 padding 会撑出热区 - 避免在按钮上同时写
width: 100%和flex: 1，二者冲突会导致宽度计算不可预测
min-width: 0 必须加在**最内层含文本的元素上**，而不是外层容器；父级设了也没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
