チャイルドハイトのFlexbox列ストレッチ

Question

私は、特定のユースケースで使用するために動的でなければならないフレックスボックスでレイアウトを構築しようとしています。 .app-content-insideというラッパーがあり、ビューポートの高さ（ヘッダーとビューポートの100％ - 左側のナビゲーションバー）が100％使用されています。これはこれまでのところうまく動作します。私は特定のdivにフレックスボックス列を追加するには、クラス.nrow-colを使用

.app-body-inner { 
    padding: 0 !important; 
    position: relative; 
    width: inherit; 
    height: calc(100vh - 40px); /* changed for demo */ 
    overflow: hidden; 
} 

。このdiv内に別のクラス.nrow-rowが存在する場合、このflexbox列の子は、残りの垂直方向の空き領域に引き伸ばされます。

.nrow-col { 
    display: flex; 
    flex-direction: column; 
    height: inherit; 
} 

.nrow-col > .nrow-row { 
    flex: auto; 
} 

は、私は以下のクラスを使用するフレックスボックスの行を追加するには：

.nrow-row { 
    display: flex; 
    flex-direction: row; 
} 

これは、最初のインスタンスのために動作しますが、私は、このようにHTMLを使用する場合、内部フレキシボックスの列の子はもう伸びていない。

<div class="app-body-inner"> 
    <div class="nrow-col"> 
    <div class="p-a top"> 
     topbar 
    </div> 
    <div class="row no-gutter nrow-row"> 
     <div class="col-sm-2"> 
     <div class="nrow-col"> 
      <div class="p-a top"> 
      coltop 
      </div> 
      <div class="nrow-row"> 
      <div class="nrow-body"> 
       <div class="nrow-inner"> 
       /\<br> 
       this should stretch between coltop and colbottom<br> 
       \/ 
       </div> 
      </div> 
      </div> 
      <div class="p-a bottom"> 
      colbottom 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-10"> 
     <div class="nrow-col"> 
      <div class="p-a top"> 
      coltop 
      </div> 
      <div class="p-a top"> 
      coltop_another 
      </div> 
      <div class="row nrow-row"> 
      <div class="nrow-body"> 
       <div class="nrow-inner"> 
       /\<br> 
       this should stretch between coltop_another and colbottom<br> 
       \/ 
       </div> 
      </div> 
      </div> 
      <div class="p-a bottom"> 
      colbottom 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="p-a bottom"> 
     bottombar 
    </div> 
    </div> 
</div> 

私の問題をテキストにするのは非常に難しいので、私が直面している問題を視覚化するplunkrを作成しました。

たぶん、誰かがあなたがフレックスコンテナにネストされた親コンテナを作成した場合、彼らは自動的に利用可能なすべての高さを消費させ、子どもたちにalign-items: stretchを適用する私に

Answer 1

を助けることができます。

.col-sm-2, .col-sm-10 { 
    display: flex; 
} 

revised demo