Warum wird mein Layout = "column" flex = "50" nicht beachtet?

Question

Mit eckigem Material versuche ich, ein grundlegendes Layout mit einer Spalte zu haben, die zwei divs enthält, die jeweils 50% der Höhe einnehmen.

Wenn die Divs leer sind, funktioniert das gut, aber wenn sie ungleiche Inhalte haben, wird der 50% Flex ignoriert und das div mit mehr Inhalt nimmt mehr von der Höhe.

Ich habe eine codepen, die das Problem demonstriert.

Hier ist mein Code:

<div ng-cloak ng-app="MyApp"> 
    <md-content> 
    <div layout="row" class="outer-row"> 
     <div flex="50" layout="column"> 
     <h3>Both divs are 50% height</h3> 
     <div flex="50" class="inner-column"> 
     </div> 
     <div flex="50" class="inner-column"> 
     </div> 
     </div> 
     <div flex="50" layout="column"> 
     <h3>Both divs are 50% height but 2nd grows because it has more content</h3> 
     <div flex="50" class="inner-column" layout="column"> 
      <p>A little content</p> 
      <p>A little content</p> 
      <p>A little content</p> 
     </div> 
     <div flex="50" class="inner-column" layout="column"> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
      <p>A lot of content</p> 
     </div> 
     </div> 
    </div> 
    </md-content> 
</div> 

Was los ist und wie kann ich dieses Problem beheben?

Aktualisierung: Dies scheint nur in Chrome passiert. Warum?

Answer 1

Die layout-column hat max-height: 100% nicht height. Sie müssen also die height davon setzen (ich weiß nicht, warum es ohne Inhalt funktioniert).

Sie können dies durch Einfügen height für diese div beheben. Versuchen Sie dies:

<div flex="50" layout="column" style="height: 100%"> 

Ich hoffe, diese Hilfe.