有没有办法让弹性子项尊重最小高度，同时又允许它增长超过容器的高度？

Question

body {
  height: 100vh;
  margin: 0;
}

.container {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#child-1 {
  min-height: 100%;
  background: rgb(255, 179, 179);
}

#child-2 {
  min-height: 100%;
  background: rgb(135, 135, 232);
  z-index: 2;
}

#child-3 {
  min-height: 100%;
  background: rgb(208, 219, 125);
}

.block {
  height: 200px;
  width: 50px;
  background: rgb(135, 214, 135);
  margin-bottom: 10px;
}

<div class='container'>
  <div id='child-1'>
    <div class='block'></div>
  </div>
  <div id='child-2'>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
  </div>
  <div id='child-3'></div>
</div>

#child-2 的内容溢出到 #child-3 中。由于某种原因，在 #child-2 上设置

min-height: 100%

不会让它增长超过 100%，即使其内容增长超过 100%。子元素的内容是动态的，有时可能小于 100%，有时会更多。如果我删除

min-height

那么 #child-2 会正确包含其所有内容而不会溢出，但是当内容占用的高度小于 100% 时我就不会处理这种情况。

Answer 1

由于

.container

是一个 Flexbox，您应该使用与 Flex 相关的属性来限制它们的尺寸。将其子项设置为

flex: 0 0 100%

可能就是您想要的。

这相当于设置

flex-grow: 0; 
flex-shrink: 0;
flex-basis: 100%;

body {
  height: 100vh;
  margin: 0;
}

.container {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#child-1 {
  flex: 0 0 100%;
  background: rgb(255, 179, 179);
}

#child-2 {
  flex: 0 0 100%;
  background: rgb(135, 135, 232);
  z-index: 2;
}

#child-3 {
  flex: 0 0 100%;
  background: rgb(208, 219, 125);
}

.block {
  height: 200px;
  width: 50px;
  background: rgb(135, 214, 135);
  margin-bottom: 10px;
}

<div class='container'>
  <div id='child-1'>
    <div class='block'></div>
  </div>
  <div id='child-2'>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
    <div class='block'></div>
  </div>
  <div id='child-3'></div>
</div>