在 Flexbox 布局中，当子元素内容超宽时，overflow: auto 常常失效——父容器不显示滚动条，反而强行撑开宽度。根本原因在于 flex 项默认不收缩至内容最小尺寸以下，需主动限制其收缩行为并启用溢出处理。
在 flexbox 布局中，当子元素内容超宽时，`overflow: auto` 常常失效——父容器不显示滚动条，反而强行撑开宽度。根本原因在于 flex 项默认不收缩至内容最小尺寸以下，需主动限制其收缩行为并启用溢出处理。
Flexbox 的默认行为是让弹性项目（flex items）尽可能伸展或收缩以填满可用空间，但它会优先尊重内容的固有尺寸（intrinsic size），尤其是 min-width: auto（这是所有块级元素的默认值）。因此，即使你为 .overflow-container 设置了 overflow: auto，只要其父元素 .box-2 是 flex item，且未显式限制其最小宽度，浏览器就会拒绝收缩 .box-2，导致内部滚动容器无法生效——整个布局被“撑开”，滚动条自然消失。
✅ 正确解法不是只给滚动容器加 overflow，而是从 flex 容器层级入手，切断过度伸展链：
- 为 flex 容器（#app）显式设置 overflow: auto（如答案所示），但这只是辅助手段；
- 最关键的是：重置 flex 项的收缩限制——给 .box-2 添加 min-width: 0（或 min-width: min-content / 0），强制它允许收缩到小于内容宽度，从而为内部 overflow: auto 创造生效条件。
以下是优化后的完整 CSS（含关键修复）：
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
#app {
display: flex;
width: 100%;
overflow: auto; /* ✅ 允许容器自身滚动（可选，视需求而定） */
}
.box-1 {
border: 1px solid red;
}
.box-2 {
padding: 10px;
border: 1px solid blue;
flex: 1;
min-width: 0; /* ✅ 核心修复！打破 flex item 默认 min-width: auto 限制 */
}
.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 规范规定：flex item 的默认 min-width 为 auto，即“至少等于内容的最小宽度”。对于包含长文本或固定宽元素的容器，这会导致它拒绝收缩——哪怕父容器已设 overflow。将 min-width 显式设为 0，相当于告诉浏览器：“允许我缩到任意小”，此时 .overflow-container 才能获得真实可用宽度，overflow: auto 才会渲染滚动条。
⚠️ 注意事项：
- 不要仅依赖 overflow: auto 在子容器上——若父 flex item 不收缩，子容器永远拿不到“受限宽度”；
- min-width: 0 安全兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 12）；
- 若需兼容极老版本 IE，可配合 flex-shrink: 1 和 max-width: 100% 双保险；
- 避免对 .box-1 等兄弟元素设置 flex: none 或固定宽，否则可能干扰主轴分配逻辑。
总结：Flexbox 中实现内部滚动，本质是控制 flex 项的收缩底线。记住口诀：“溢出要生效，先破 min-width” ——加上 min-width: 0，再配 overflow: auto，即可优雅支持响应式水平滚动。
