html - 当内容很长时如何使用中间的最小高度元素

Question

(1)当#child2的内容​​比较少的时候，我想这样显示输出:

https://output.jsbin.com/nisacihuru

<div id="parent">
    <div id="child">child</div>
    <div id="child2">
        <div id="child2_1">child2_1</div>
        <div id="child2_2">child2_2</div>
    </div>
    <div id="child3">child3</div>
</div>

body, html { height: 100% }

#parent { height: 1px; min-height: 100% }

#child { height: 20%; background-color: red; }
#child2 { height: 1px; min-height: 80%; }
#child2_1 { height: 50%; background-color: orange; }
#child2_2 { min-height: 50%; background-color: yellow; }
#child3 { height: 20%; background-color: green; }

(2) 当#child2 的内容很长时，我想这样显示输出。

https://output.jsbin.com/nunosodaju

<div id="child2_2">child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br></div>

但效果不佳..在第二种情况下，#child3 的内容会出现在#child2_2 上。

如果你知道，请解释如何解决它。谢谢:)

Answer 1

#parent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#child {
  flex: 1;
  background-color: red;
}

#child2 {
  flex: 4;
  display: flex;
  flex-direction: column;
}

#child2_1 {
  flex: 1;
  background-color: orange;
}

#child2_2 {
  flex: 1;
  background-color: yellow;
}

#child3 {
  flex: 1;
  background-color: green;
}

body {
  margin: 0
}

<div id="parent">
  <div id="child">child</div>
  <div id="child2">
    <div id="child2_1">child2_1</div>
    <div id="child2_2">child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br>child2_2<br></div>
  </div>
  <div id="child3">child3</div>
</div>