Dlaczego mój layout = "column" flex = "50" nie jest honorowany? - flexbox, materiał kątowy

Używając materiału kątowego, staram się uzyskać podstawowy układ z kolumną zawierającą dwa div, z których każdy zajmuje 50% wysokości.

Gdy div są puste, to działa dobrze, ale gdy mają nierówną zawartość, 50% flex jest ignorowane, a div z większą zawartością zajmuje więcej wysokości.

mam kodepen demonstrując problem.

Oto mój kod:

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

Co się dzieje i jak mogę to naprawić?

Aktualizacja: Wydaje się, że dzieje się to tylko w Chrome. Czemu?

Odpowiedzi:

The layout-column ma max-height: 100% nie height. Więc musisz ustawić height tego (nie wiem, dlaczego działa bez treści).

Możesz to naprawić, wstawiając height dla tego div. Spróbuj tego:

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

Mam nadzieję, że to pomoże.