如何让#parent_box适配空间且不发生溢出？

要让#parent_box适配body剩余空间，同时阻止#left_box添加元素时撑大容器，需要调整flex布局的约束设置，具体修改如下：

核心修改点 #

• 给#parent_box设置flex: 1，让它占据#outer_box的剩余可用空间，同时添加overflow: hidden确保内部元素的overflow规则生效
• 移除#left_box和#right_box的max-height: inherit，改为依赖父容器的高度约束，确保overflow-y: auto能正确触发滚动

修改后的完整代码 #

CSS部分 #

body {
  display: flex;
  flex-direction: column;
  max-height: 50vh;
  margin: 0; /* 移除默认margin避免布局偏移 */
}

#outer_box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#parent_box {
  display: flex;
  flex: 1; /* 关键：占据outer_box剩余空间 */
  overflow: hidden; /* 关键：建立BFC，限制内部元素高度 */
}

#left_box,
#right_box {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* 内容超出时垂直滚动 */
}

#left_box {
  background: grey;
}

#left_box div {
  flex: 1;
}

#right_box {
  background: yellow;
}

#line {
  min-height: 20px;
  background: blue;
}

HTML部分（无需修改） #

<div id="outer_box">
  <div>item1</div>
  <div>item2</div>
  <div id="parent_box">
    <div id="left_box"></div>
    <div id="right_box"></div>
  </div>
</div>
<div id="line"></div>

JS部分（无需修改） #

let box = document.getElementById('left_box')
for (let i = 0; i < 15; i++) {
  let e = document.createElement('div')
  e.innerText = 'some text goes here'
  box.appendChild(e)
}

原理说明 #

• #parent_box通过flex:1获取#outer_box的剩余空间，overflow:hidden让它成为块级格式化上下文（BFC），内部元素的高度会被限制在容器范围内
• #left_box的overflow-y:auto此时会生效，当内容高度超过容器时自动显示滚动条，不会向外撑大#parent_box

内容的提问来源于stack exchange，提问作者mal1213