如何让两个内部div垂直生长在一起，而外部div处理垂直溢出？

Question

我有一个外部 div，它具有最大高度和溢出 y：auto。

里面有两个并排的 div，由于其中任一内容的原因，它们可能是垂直的。

左侧 div 的背景为灰色，右侧的 div 背景为白色。

我需要两个 div 垂直增长，但它们受到我在外部 div 上设置的最大高度的限制。

我希望左侧div和右侧div垂直展开，但只有一个滚动条（在外部div上）

这是 HTML：

<div class="outer">
  <div class="inner-left">
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
  </div>
  <div class="inner-right">
      Right Content
  </div>
</div>

这是CSS：

.outer {
  display: flex;
  overflow-y: auto;
  max-height: 100px;
  border: 1px solid black;
  padding: 16px;
}

.inner-left {
  background-color: grey;
  width: 50%;
}

.inner-right {
  background-color: white;
  width: 50%;
}

这里是 JSFiddle 链接：https://jsfiddle.net/mux67o34/

如你所见，左侧div的灰色背景并没有下降到外部div的底部

Answer 1

使用“overflow-y:scroll;”对于 .inner-right 和 .inner-left