当使用 flex 布局时，若子容器需启用垂直滚动但内容仍溢出父级高度，根本原因常是 flex 项目默认不收缩（min-height: auto），导致 overflow 属性失效；添加 min-height: 0 可强制其参与收缩，使滚动正常工作。
当使用 flex 布局时，若子容器需启用垂直滚动但内容仍溢出父级高度，根本原因常是 flex 项目默认不收缩（min-height: auto），导致 overflow 属性失效；添加 min-height: 0 可强制其参与收缩，使滚动正常工作。
在现代 CSS Flex 布局中，overflow: scroll 或 overflow-y: scroll 要生效，必须满足两个前提：
- 元素自身具有明确的、可约束的高度边界；
- 元素的实际内容高度超出该边界，且该元素具备收缩能力（即不因 flex 默认行为而撑高）。
在你的结构中，.content-container 是 .main-container 的 flex 子项（flex-direction: column 下的中间区域），它本身又是一个 display: flex 容器。此时，其子元素（如 .content-left）在默认情况下拥有 min-height: auto —— 这是浏览器对 flex 项目的规范行为，意味着它不会主动缩小以容纳滚动，即使设置了 overflow-y: scroll，也会优先扩张容器而非触发滚动条。
✅ 正确解法是为 .content-container 显式声明：
.content-container {
display: flex;
min-height: 0; /* 关键：允许其在 flex 主轴方向上收缩 */
}
同时建议优化滚动设置：
- 使用
overflow-y: scroll（或更推荐的overflow-y: auto）替代overflow: scroll，避免无意义的水平滚动条； - 确保
.content-left有明确高度上下文（它继承自 flex 分配，无需额外设 height，但依赖父容器可收缩）。
完整修正后的 CSS 示例：
body {
margin: 0;
}
.main-container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #ffe6e6;
}
.content-container {
display: flex;
min-height: 0; /* ✅ 核心修复：启用收缩 */
}
.content-container > div {
flex: 1;
}
.content-left {
overflow-y: auto; /* 更合理：仅在需要时显示滚动条 */
}
.scrolling-content {
height: 1000px;
background-color: #ffeb3b;
padding: 16px;
}
⚠️ 注意事项：
- 不要遗漏
body { margin: 0 }，否则100vh可能因默认 body 边距产生意外滚动； - 若
.content-left内部内容动态加载，建议配合scrollbar-gutter: stable（现代浏览器）或最小高度兜底，提升滚动体验一致性； - 在旧版 Safari 中，
min-height: 0对 flex 子项的支持需确保-webkit-min-height: 0兼容（必要时添加）。
总结：Flex 布局中的滚动失效，90% 源于未重置 min-height。牢记——只要你想让某个 flex 子项支持内部滚动，就应检查并显式设置其最小尺寸为 0。
