根本原因是浏览器默认给Flex子项设min-width: auto，锁死其不能缩于内容宽度之下；必须显式设min-width: 0解除该限制，再配合flex: 1、overflow: hidden、white-space: nowrap及text-overflow: ellipsis等才可正常收缩与截断。
直接说结论：子项宽度超出父容器，根本原因不是 flex 写错了，而是浏览器默认给 Flex 子项加了 min-width: auto —— 它会锁死子项不能缩得比内容更小，哪怕你写了 flex: 1 或 flex-grow: 1，也压不住这个“最小宽度保护”。
为什么 flex: 1 不起作用？
很多人以为只要写 flex: 1，子项就一定填满剩余空间。但实际它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。问题出在 flex-basis: 0% 并不等于“无视内容宽度”。当子项内有长单词（如一串无空格 URL）、white-space: nowrap 或内联块级元素时，浏览器仍会先按内容固有宽度撑开，再考虑是否收缩——而 min-width: auto 就是那个不让它缩的“刹车片”。
常见错误现象：
- 右侧文本框把左侧固定宽元素挤变形
- 设置
overflow: hidden后文字被截断，但容器依然溢出 - 用
flex-shrink: 0反而让另一侧完全消失
min-width: 0 是关键开关
必须显式覆盖掉默认的 min-width: auto，才能让 flex-grow 真正接管宽度分配。这不是可选项，是必要操作。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 对需要自适应剩余空间的子项，加上
min-width: 0（水平布局）或min-height: 0（垂直布局） - 如果该子项还包含文本，顺手加
overflow: hidden+text-overflow: ellipsis（单行）或word-break: break-word（多行） - 不要只加
min-width: 0就完事——若子项内部还有嵌套 Flex 容器，它的子子项也可能需要同样处理
遇到长无空格字符串怎么办？
比如日志 ID、Base64 字符串、URL 等，即使加了 min-width: 0，浏览器默认也不换行，照样溢出。
必须组合控制：
-
word-break: break-all：强制在任意字符间断行（最暴力有效） -
overflow-wrap: break-word：只在单词内断，比break-all更友好，但对纯字母串可能无效 - 如果要保留可复制性，避免用
text-overflow: ellipsis，改用overflow-x: auto+white-space: nowrap
父容器设了 overflow: auto 还是截断？
这是个隐藏坑：当父容器是 display: flex 且设置了 overflow: auto，其直接子项如果是 display: flex，它会按块级行为占满整行宽度，导致滚动条“有形无实”——拖动后右边内容仍不可见。
解决方法很反直觉：
- 把子项的
display: flex改成display: inline-flex - 或者给子项加
width: fit-content+flex-shrink: 0 - 二者都让子项宽度回归“由内容决定”，而不是被父 Flex 容器强行拉伸
真正容易被忽略的点：这些修复不是孤立生效的。min-width: 0、word-break、display: inline-flex 往往要一起上，少一个就可能在某个边界场景下失效——尤其是动态内容、响应式缩放、或嵌套 Flex 的时候。
