我有兩個flex孩子，他們可能小也可能大，我把小定義為& lt集裝箱高度的50%和大as & gt集裝箱高度的50%。子容器的高度之和可能大于容器高度的100%,在這種情況下，我希望其中一個或兩個都滾動。

如果一個孩子很小，另一個很大，我希望小元素正好使用它需要的空間:它不應該收縮以容納大元素，也不應該增長到50%，并且它不應該滾動其內容。我希望大元素使用剩余的空間，并在必要時滾動其內容。

如果兩個都很大，我希望它們都使用容器高度的50%來滾動內容。

我把這個Codepen作為一個例子來幫助說明我想要實現的東西，但不幸的是，它目前沒有滾動或調整大小的功能:https://codepen.io/joeysilva/pen/wvmPqLK.它有小-大和大-大兩種情況。

.flex-container {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  display: inline-block;
  overflow: hidden;
}

.child {
  flex: 50%;
  overflow: auto;
}

.small {
  background: red;
  height: 30px;
}

.large {
  background: blue;
  height: 110px;
}

<div class="flex-container">
  <div class="child">
    <div class="small">Small</div>
  </div>
  <div class="child">
    <div class="large">Large</div>
  </div>
</div>
<div class="flex-container">
  <div class="child">
    <div class="large">Large 1</div>
    <div class="large">Large 2</div>
  </div>
</div>

注1:不要同時使用display:inline-block和display:flex。只需添加另一個包裝器來顯示行或列中的元素。

注2:彈性:50%；相當于flex:1 1 50%；這是flex-grow的簡寫形式:1；伸縮:1；彈性基礎:50%；。在您的代碼中，沒有必要使用它們，因為您已經嚴格定義了元素的高度，而且50%高度的基礎是錯誤的，因為您希望小元素正好使用它需要的空間；沒有成長。沒有縮水，所以應該省略。

.wrapper {
  display: flex;
  flex-direction: row;
}

.flex-container {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.child {
  overflow: auto;
}

.small {
  background: red;
  height: 30px;
}

.large {
  background: blue;
  height: 110px;
}

<div class="wrapper">
  <div class="flex-container">
    <div class="child">
      <div class="small">Small</div>
    </div>
    <div class="child">
      <div class="large">Large</div>
    </div>
  </div>

  <div class="flex-container">
    <div class="child">
      <div class="large">Large 1</div>
    </div>
    <div class="child">
      <div class="large">Large 2</div>
    </div>
  </div>
</div>