Flexbox-Säule auf Childs-Höhe dehnen?

Question

Ich versuche, ein Layout mit Flex-Box aufzubauen, das für bestimmte Anwendungsfälle dynamisch sein muss. Ich habe einen Wrapper namens .app-content-inside, der 100% Höhe des Ansichtsfensters verwendet - die Kopfzeile und 100% des Ansichtsfensters - die Navigationsleiste auf der linken Seite. Das funktioniert soweit gut.

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

Ich verwende die Klasse .nrow-col flex Feld Spalte auf bestimmte div hinzuzufügen. Wenn in diesem div ein anderes mit der Klasse .nrow-row existiert, sollte dieses flexbox column child auf den verbleibenden vertikalen freien Platz gestreckt werden.

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

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

flex Feld Zeile hinzuzufügen verwende ich die folgende Klasse:

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

Das für die erste Instanz funktioniert, aber wenn ich HTML wie folgt verwenden die innere Flexbox Spalte Kind nicht mehr gestreckt wird:

<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> 

es in der Tat sehr schwierig ist mein Problem in Text zu bekommen, so habe ich ein plunkr, das das Problem, das ich mit bin konfrontiert visualisiert ...

sie automatisch align-items: stretch an die Kinder, die verschachtelten geordneten Container in Flex-Container machen gelten, sie alle verfügbaren Höhe zu verbrauchen Wenn Sie jemand kann mir

Vielleicht helfen

Answer 1

verursacht.

Hier ist, was Sie hinzufügen müssen:

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

revised demo