在 Flexbox 布局中，当子元素内容超宽时，overflow: auto 常失效——父容器会无限撑开而非显示滚动条；根本原因是 flex 项默认不主动收缩以让出空间，需显式控制 flex 行为与容器溢出策略。
在 flexbox 布局中，当子元素内容超宽时，`overflow: auto` 常失效——父容器会无限撑开而非显示滚动条；根本原因是 flex 项默认不主动收缩以让出空间，需显式控制 flex 行为与容器溢出策略。
Flexbox 的默认行为是：flex 项目（flex items）不会自动缩小到低于其最小内容宽度（min-content），尤其当内部存在长文本、固定宽元素或 min-width 设置时。这导致 .overflow-container 即使设置了 overflow: auto，其父级 .box-2 仍会不断伸展以容纳 .overflow-content 的 min-width: 2000px，从而阻止滚动条出现。
✅ 正确解法分两步：
- 强制 .box-2 可收缩：添加 min-width: 0（或 overflow: hidden），覆盖浏览器对 flex 项的默认 min-width: auto 行为，使其能随容器压缩；
- 确保滚动容器自身可触发溢出：.overflow-container 需明确宽度约束（如 width: 100% 已有），且父容器（.box-2）必须允许内容溢出。
因此，完整修复方案如下：
#app {
display: flex;
width: 100%;
/* 关键：让整个 flex 容器支持横向滚动（可选，取决于设计需求）*/
overflow: auto; /* 若仅希望 .box-2 内部滚动，此行非必需 */
}
.box-1 {
border: 1px solid red;
}
.box-2 {
padding: 10px;
border: 1px solid blue;
flex: 1;
/* ✅ 核心修复：重置最小宽度，允许收缩 */
min-width: 0;
}
.overflow-container {
padding: 10px;
width: 100%;
border: 1px solid green;
overflow: auto; /* 现在生效！ */
}
.overflow-content {
width: 100%;
min-width: 2000px; /* 超宽内容 */
border: 1px solid pink;
}
⚠️ 注意事项：
- min-width: 0 是解决 flex 溢出问题最常用、最语义清晰的方式（优于 overflow: hidden，因后者可能意外裁剪边框或阴影）；
- 不要仅依赖 overflow: auto 在 .overflow-container 上——若其 flex 父项（.box-2）拒绝收缩，该样式将完全被忽略；
- 若需严格限制 .box-2 的宽度（例如固定最大宽度），可补充 max-width: xxx，但 min-width: 0 仍是前提；
- 在较老浏览器（如 Safari
总结：Flexbox 中实现滚动的核心不是“加 overflow”，而是先解除 flex 项的收缩限制。min-width: 0 是解锁 overflow: auto 生效的钥匙——它告诉浏览器：“这个 flex 项可以比内容还窄，请优先启用滚动机制”。
