はどのように真ん中分の高さの要素を使用する

Question

（1）＃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>

が、それは第二の場合には...うまく動作しない、＃1 child3の内容は、＃1 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>