具有最小高度的 Flexbox，不会随内容拉伸

Question

https://jsfiddle.net/u7fkjrvy/17/

我有一个带有弹性列的可滚动容器。 每个孩子都有“最小高度：100％”（我希望每个 div 适合屏幕的高度）。问题是，当子级的内容大于 100% 时，子级将不会拉伸以适应内部的内容。我不明白为什么，因为它应该只是最小值，因为它不是“高度”参数？

HTML 和 CSS

body{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
}

container{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column;
}

section:nth-child(2){
  background-color: blue
}

section{
  min-height: 100vh;
  background-color: yellow;
  padding:10px
}

.content{
  height: 120vh;
  background-color:black;
  color:white
}

<container>
  <section>
    <div class="content">
    </div>
  </section>
  <section></section>
</container>

感谢您的帮助！

Answer 1

删除部分的最小高度，它将按此处所示工作

body{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
}

container{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column;
}

section:nth-child(2){
  background-color: blue
}

section{
  background-color: yellow;
  padding:10px;
}

.content{
  height: 1200vh;
  background-color:black;
  color:white
}

<container>
  <section>
    <div class="content">
    </div>
  </section>
  <section></section>
</container>