当使用 Flex 布局时，若子容器需在固定高度内实现内容滚动，常因父级 flex 项未设置 min-height: 0 导致滚动失效——该属性可阻止 flex 项默认的最小尺寸限制，使 overflow 正常生效。
当使用 flex 布局时，若子容器需在固定高度内实现内容滚动，常因父级 flex 项未设置 `min-height: 0` 导致滚动失效——该属性可阻止 flex 项默认的最小尺寸限制，使 `overflow` 正常生效。
在现代 CSS Flex 布局中，一个常见但容易被忽视的问题是：设置了 overflow-y: scroll 的子容器仍无法滚动，反而撑开父容器高度。其根本原因在于：Flex 项（flex item）默认具有 min-height: auto（在主轴为 column 时对应 min-height，row 主轴则为 min-width），这会阻止其收缩到小于内部内容的固有高度，从而让 overflow 失效。
在你的结构中，.content-container 是 .main-container 的 flex 子项（位于 flex-direction: column 的上下文中），它本身是 flex: 1 的弹性区域；而其子元素 .content-left 虽设置了 overflow-y: scroll，但由于 .content-container 缺少 min-height: 0，浏览器不会允许 .content-left 在约束高度内“压缩”并触发滚动条。
✅ 正确解法是：为 .content-container 显式声明 min-height: 0（注意不是 height: 0 或 flex-basis: 0）。这会解除 flex 项的默认最小尺寸保护，使其能随可用空间收缩，从而让内部 overflow-y: scroll 得以生效。
以下是修复后的关键 CSS 片段：
.main-container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: red;
}
.content-container {
display: flex;
min-height: 0; /* ✅ 关键修复：允许 flex 子项收缩 */
}
.content-container > div {
flex: 1;
}
.content-left {
overflow-y: scroll; /* 推荐显式使用 overflow-y 而非 overflow */
}
.scrolling-content {
height: 1000px;
background-color: yellow;
}
⚠️ 补充注意事项：
-
不要遗漏
body { margin: 0 }：避免默认 body 边距干扰100vh高度计算（如示例中已添加）； -
慎用
overflow: scroll：它会在无内容溢出时也强制显示滚动条；推荐使用overflow-y: auto，仅在需要时显示纵向滚动条； - 若
.content-left需保持宽度自适应（如与右侧等宽），确保其父.content-container使用display: flex且子项均设flex: 1，无需额外设定 width； - 在嵌套 flex 场景中，所有中间 flex 容器（尤其是
flex: 1的项）都应检查是否需加min-height: 0或min-width: 0，这是跨浏览器兼容滚动行为的通用实践。
通过这一微小却关键的样式调整，即可让滚动容器严格受限于父容器分配的空间，真正实现「内容超长时滚动、不超长时自适应」的理想行为。
