子 Flexbox 元素的高度不断增长，大于父 Flexbox 容器的高度

Answer 1

可能不是最完美的解决方案，但它可能会起作用：第一个子级的内容可以包装在额外的绝对定位的可滚动容器中。

必须将其拉伸以完全适合第一个孩子（左边的孩子）。

.flexbox {
  display: flex;
}

.first-child {
  flex-grow: 1;
  position: relative;
}

.second-child {
  display: flex;
  flex-direction: column;
}

.content-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.content {
  height: 500px;
  background-color: red;
}

.second-content {
  width: 200px;
  height: 200px;
  background-color: blue;
}

<div class="flexbox">
  <div class="first-child">
    <div class="content-wrap">
      <div class="content">
        Large element with dynamic height. Scrollbar should appear when height is more than blue box.
      </div>
    </div>
  </div>
  <div class="second-child">
    <div class="second-content">
      Small element with fixed height
    </div>
  </div>
</div>