Flex容器在父级之上生长-双滚动条

Question

我已经进行了以下设置：

<div class="main-container"> <!-- height 100% -->
  <div class="fixed-container">Fixed Container</div>
  <div class="content-wrapper"> <!-- flex: 1 -->
    <div class="overflow-container"> <-- flex: 1 and applying overflow: auto -->
      <!-- ...and more content here -->
      <div class="overflow-content"> <!-- exceeding overflow-container -->
        ....
      </div>
    </div>
  </div>
</div>

我从here获得的代码示例是codepen，我对其进行了一些操作以实现此行为，如下面的代码段或here

所示。

main-container正在扩展到全高，因此其父级为100％。 （在本例中为视口）

fixed-container的固定高度为100px，在这种情况下不相关

现在content-wrapper的增长速度与flex: 1一样快，奇怪的是：现在content-wrapper的增长很小，因此main-container只需滚动一点，然后滚动条出现。

我真的不明白为什么内容包装器增长得如此之快，任何人对此都有任何解释或解决方案，如何防止main-container显示滚动条，或者content-wrapper成长没有他现在那么快？

/* a container with flex-direction column */
.main-container {
  max-height: 100vh; /* or position:absolute; height:100%; */
  display: flex;
  flex-direction: column;
}

/* an arbitrary container of fixed height */
.fixed-container {
  height: 100px;
  padding: 20px;
  background-color: #0B5AB0;
  color: white;
}

/* this is the flex container that will take the rest of the height */
.content-wrapper {
  display: flex;
  flex: 1;
  min-height: 0px; /* IMPORTANT: you need this for non-chrome browsers */
}

/* the container for our overflowed content */
.overflow-container {
  flex: 1;
  overflow: auto;
}

/* the overflow content itself */
.overflow-content {
  height: 2000px;
  color: black;
  background-color: #ddd;
  padding: 20px;
}

code {
  font-weight: bold;
  color: darkred;
  margin: 0 5px;
}

<div class="main-container">
  <div class="fixed-container">Fixed Container</div>
  <div class="content-wrapper">
    <!-- ...more content here -->
    <div class="overflow-container">
      <!-- ...and more content here -->
      <div class="overflow-content">
        Overflow Content
        <br/><br/>
        For Non-Chrome browsers (Firefox, Safari, etc):<br/>
        Without <code>min-height:0px;</code> on the content-wrapper,
        this content will not scroll but instead will expand to its 
        full height.
        <br/><br/>
        Note that the setup of the main-container here is important too.
        If its not
        <code>position:absolute; height:100%; flex-direction:column;</code>
        or 
        <code>height:100vh; flex-direction:column;</code>
        then you may not run into this issue;
      </div>
    </div>
  </div>
</div>