如果没有足够的空间，我希望整个内部容器水平滚动。如果没有足够的垂直空间，内部容器（绿色部分）中的顶部div应该是垂直可滚动的。
我遇到的问题是，一旦我在topDiv上设置了垂直滚动，它实际上限制了该div的宽度。当您水平滚动时，您将看到有可用空间，但没有填满。我在找的解决方案应该能拉伸绿色部分。

.outerContainer {
  height: 300px;
  width: 500px;
}

.innerContainer {
  overflow: auto hidden;
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  place-content: stretch space-between;
  align-items: stretch;
  flex: 1 1 100%;
  max-height: 100%;
}

.topDiv {
  background-color: green;
  margin-bottom: 1em;
  align-self: stretch;
  flex: 1 1 auto;
  box-sizing: border-box;
  overflow: hidden auto;
}

.bottomDiv {
  background-color: lightblue;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 600px;
  height: 50px;
}

.innerDiv {
  width: 600px;
  height: 50px;
  margin: 10px;
  background-color: darkseagreen;
}

<div class="outerContainer">
  <div class="innerContainer">
    <div class="topDiv">
      <div class="innerDiv">Some content</div>
      <div class="innerDiv">Some content</div>
      <div class="innerDiv">Some content</div>
      <div class="innerDiv">Some content</div>
      <div class="innerDiv">Some content</div>
      <div class="innerDiv">Some content</div>
    </div>
    <div class="bottomDiv">This should always be visible</div>
  </div>
</div>

Codepen
我试图通过将topDiv的宽度设置为100%来强制它的宽度，但这没有任何效果。它只会在设置一定数量的像素时发生变化（这不是一个可行的解决方案）。