Flexbox布局下min-height容器无法随内容拉伸的问题求助

我使用flex column布局的可滚动容器，为每个子元素设置了min-height:100vh，期望每个div至少适配屏幕高度，但当子元素内部内容高度超过100vh时，子容器并未随内容拉伸。我原本认为min-height只是设置高度最小值，而非固定高度，因此对此感到困惑。

需求总结：让设置了min-height:100vh的div既能保持最小屏幕高度，又能随内部内容自动拉伸。

原始代码 #

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
}

HTML #

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

问题原因与解决方法 #

问题出在flex容器的配置上：当flex容器设置了固定的height:100vh，flex子项在column方向的布局会被容器高度限制，即使子项设置了min-height，也无法正常被内部内容撑开。

只需要改两处：

• 把container的height:100vh改成min-height:100vh，让容器能随内容高度自适应，同时保持最小占满屏幕的高度。
• 给section加上flex-shrink: 0，防止flex子项被压缩，确保它能按照自身内容高度展开。

修改后的CSS #

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

container{
  width: 100%;
  min-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;
  flex-shrink: 0;
}

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

这样修改后，每个section会保持至少100vh的高度，当内部内容超过100vh时，section会自动拉伸适配内容高度，同时整个容器也会随子项高度变化，正常滚动。

内容的提问来源于stack exchange，提问作者ZACK F.