如果沒有足夠的空間，我希望整個(gè)內(nèi)部容器可以水平滾動(dòng)。如果沒有足夠的垂直空間，內(nèi)部容器(綠色部分)中的頂部div應(yīng)該是垂直可滾動(dòng)的。

我遇到的問題是，一旦我在topDiv上設(shè)置了垂直滾動(dòng)，它實(shí)際上限制了那個(gè)Div的寬度。當(dāng)你水平滾動(dòng)時(shí)，你會(huì)看到有可用的空間，但沒有填滿。我尋找的解決方案應(yīng)該拉伸綠色部分。

.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>

您可以嘗試將bottomDiv包裝在另一個(gè)具有overflow: auto的Div中。不確定這對(duì)你是否有效，但它可能會(huì)給你指明正確的方向:)

.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;
}

.bottomDivWrapper {
  overflow: 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="bottomDivWrapper">
      <div class="bottomDiv">This should always be visible</div>
    </div>
  </div>
</div>