通过合理设置 flex 布局的 max-height: inherit 和 overflow: hidden，可确保 #parent_box 严格占据可用空间，避免因子元素增长导致的高度溢出。
通过合理设置 flex 布局的 `max-height: inherit` 和 `overflow: hidden`，可确保 `#parent_box` 严格占据可用空间，避免因子元素增长导致的高度溢出。
在 Flexbox 布局中，让嵌套容器（如 #parent_box）精准“承接”父级剩余高度，关键在于高度继承链的显式声明与溢出行为的主动约束。原代码中，虽然为 #left_box 和 #right_box 设置了 overflow-y: auto 和 max-height: inherit，但 #parent_box 及其上层 #outer_box 缺少对高度继承的明确支持，导致浏览器无法准确计算其最大可用高度，最终引发内容撑开、布局溢出。
✅ 正确解法需两步协同：
-
补全高度继承链：为
#outer_box添加max-height: inherit，使其从body（max-height: 50vh）正确接收高度上限； -
强制截断不可伸展：为
#parent_box添加overflow: hidden（或overflow: auto），防止其子项（尤其是flex: 1的#left_box div）无限制拉伸，同时保留max-height: inherit维持高度约束。
修正后的关键 CSS 如下：
body {
display: flex;
flex-direction: column;
max-height: 50vh; /* 根容器高度上限 */
margin: 0; /* 防止默认 body margin 干扰 */
}
#outer_box {
flex: 1;
display: flex;
flex-direction: column;
max-height: inherit; /* ✅ 关键：继承 body 的 50vh */
}
#parent_box {
display: flex;
max-height: inherit; /* ✅ 继承 #outer_box 的可用高度 */
overflow: hidden; /* ✅ 关键：阻止内容突破边界 */
}
#left_box,
#right_box {
flex: 1;
display: flex;
flex-direction: column;
max-height: inherit; /* ✅ 子容器继续继承 */
overflow-y: auto; /* 内容超限时启用滚动 */
}
#left_box div {
/* 注意：移除 flex: 1 —— 否则每个 div 会均分剩余空间，导致高度失控 */
/* 改为使用 min-height / padding 或固定高度策略 */
padding: 8px;
box-sizing: border-box;
}
⚠️ 特别注意：原代码中 #left_box div { flex: 1 } 是溢出主因之一。当多个 flex: 1 元素并列于一个 flex-direction: column 容器中时，它们会争夺并平分容器的可用高度，而非自然堆叠。一旦子元素数量增加，单个元素被压缩至极小高度，但 Flexbox 仍尝试满足 flex: 1 约束，极易触发渲染异常或隐式高度膨胀。建议改为 flex: none + margin/padding 控制间距，或使用 align-items: flex-start 配合自然文档流布局。
? 总结：Flex 容器的高度控制是链式依赖过程——每一级都需显式声明 max-height: inherit 以延续约束，并配合 overflow 属性主动管理溢出行为。忽略任一环节，都可能导致“看似设了限制，实则无效”的常见陷阱。
