flex容器溢出触发横向滚动条的主因是父容器未约束宽度且子项内容（如长单词、URL）撑开flex项，解决关键是给flex容器设min-width: 0，并配合子项min-width: 0、overflow: hidden及overflow-wrap: break-word。
flex容器溢出触发横向滚动条的常见原因
根本不是display: flex本身有问题，而是父容器没约束宽度 + 子项内容（比如长单词、URL、未折行文本）撑开flex项，导致整个flex容器超宽。浏览器按默认规则渲染，父容器又没设overflow-x: hidden或width限制，滚动条就出来了。
常见错误现象：flex-direction: row下一行文字突然出现横向滚动条；卡片布局在小屏上左右滑动；justify-content: space-between时右侧元素被挤出视口。
- 子项含
white-space: nowrap且内容过长（如日志ID、token） - 图片或
iframe未设max-width: 100% - 父容器用了
width: 100vw但忽略了垂直滚动条占位（导致实际可用宽度变小） -
flex-shrink: 0被误加在本该收缩的项上
关键CSS属性组合：让flex项自动收缩不溢出
核心思路是「允许收缩 + 限制内容换行」，而不是靠隐藏滚动条治标。
- 给flex容器加
min-width: 0（这是最关键的一步！默认min-width: auto会阻止子项压缩） - 给可能撑宽的子项加
min-width: 0和overflow: hidden（尤其包裹文本的元素） - 文本内容加
word-break: break-word或overflow-wrap: break-word（优先用后者，兼容性更好） - 避免对flex子项单独设
flex-shrink: 0，除非你明确知道它不该缩小
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
min-width: 0; /* 必须 */
}
.item-text {
min-width: 0;
overflow: hidden;
overflow-wrap: break-word;
}图片、iframe等替换元素的特殊处理
它们属于「替换元素」，flex默认不会按内容缩放，flex-shrink对它们效果有限，必须显式约束尺寸。
- 所有
img、video、iframe必须设max-width: 100%和height: auto - 如果父flex项有
flex: 1，但图片仍溢出，说明它没继承max-width——检查是否被更高级选择器覆盖 - 不要依赖
object-fit来解决溢出，它只控制内部填充方式，不解决容器宽度问题
调试时先确认是不是滚动条真由flex引起
容易忽略的一点：你以为是flex导致的滚动，其实可能是其他元素撑开的。快速验证步骤：
- 临时给body加
outline: 1px solid red，看哪一层真正超宽 - 在DevTools里逐个禁用flex相关样式（
display: flex、flex-direction等），观察滚动条是否消失 - 检查是否有未重置的
margin或padding（比如body默认有8px外边距） - 用
getComputedStyle(el).width对比元素计算宽度和父容器宽度
真正难缠的是嵌套flex+绝对定位+文本混合的场景，这时候min-width: 0要加在每一层可能撑开的容器上，不能只加最外层。
