フレックスボックスの高さ100％が親の外に出ていますか？

Question

私はここでフレックスボックスを使用しなければならない設計上の理由から、別のスタックポストで管理していた表示ブロックのように動作するbtn pエレメントが必要でしたが、今は "other divs"クラスを100％主な親から出て行く、なぜ私は理解できない？灰色のボックス上の例からも

#outterWrapper { 
 
    display: inline-block; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    height: 200px; 
 
    flex-wrap: wrap; 
 
} 
 

 
#menu { 
 
    display: flex; 
 
    flex-basis: 100%; 
 
} 
 

 
#menu p { 
 
    margin: 0; 
 
    padding: 8px; 
 
    padding-bottom: 0; 
 
} 
 

 
.otherDivs { 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: grey; 
 
    margin-right: 5px; 
 
}

<div id="outterWrapper"> 
 

 
    <div id="container"> 
 

 
    <div id="menu"> 
 

 
     <p>Btn</p> 
 
     <p>Btn</p> 
 
     <p>Btn</p> 
 

 
    </div> 
 

 
    <div class="otherDivs"></div> 
 

 
    </div> 
 

 
</div>

赤色境界線の外側に行きますか？あなたは

Answer 1

カラム方向に切り替えて、このようなもの持つことができます。

#outterWrapper { 
 
    display: inline-block; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    height: 200px; 
 
    flex-direction:column; 
 
} 
 

 
#menu { 
 
    display: flex; 
 
} 
 

 
#menu p { 
 
    margin: 0; 
 
    padding: 8px; 
 
    padding-bottom: 0; 
 
} 
 

 
.otherDivs { 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: grey; 
 
    margin-right: 5px; 
 
}

<div id="outterWrapper"> 
 

 
    <div id="container"> 
 

 
    <div id="menu"> 
 

 
     <p>Btn</p> 
 
     <p>Btn</p> 
 
     <p>Btn</p> 
 

 
    </div> 
 

 
    <div class="otherDivs"></div> 
 

 
    </div> 
 

 
</div>

を