Высота элемента Flexbox независимо от его содержимого

Question

Я знаю, это звучит как еще один вопрос о flexbox, который решается в другом месте, но я не могу найти решение из существующих сообщений google или stackoverflow.

Проблема проста.

У меня есть 3 дочерних divs внутри родительского div, один из которых содержит содержимое, большее его конечного размера. Я хотел бы, чтобы каждый ребенок был 1/3 своего родителя без изменения его содержания.

Вот скрипка: http://jsfiddle.net/xeqo0msq/

Вот HTML:

<div class="parent"> 
    <div class="child red"> 
     <div class="content">1</div> 
    </div> 
    <div class="child blue">2</div> 
    <div class="child green">3</div> 
</div> 

И ассоциированная CSS:

.parent { 
    display: flex; 
    flex-direction: column; /*or row*/ 
    height: 100%; 
    width: 100%; 
} 

.child { 
    flex: 1; 
} 

.content{ 
    width: 800px; 
    height: 100px; 
} 

.red {background: red;} 
.blue {background: blue;} 
.green {background: green;} 

Для flex-direction: row; это работает, как ожидалось: каждый ребенок 1/3 его родителя, хотя первый контент больше. Ширина действует так, как будто она не зависит от содержимого.

Для flex-direction: column; первый ребенок путь больше, чем два других.

Можно ли достичь этого с помощью Flexbox и flex-direction: column;?

Answer 1

При определении как flex-direction: row ширина родителя ограничена экраном, поэтому он известен. Flex распределяет ширину до трех детей.

Но когда flex-direction: column, высота родителя неизвестна (определяется детьми). Хотя вы определяете его как height: 100%, но этот 100% относится к высоте его родительского элемента, который равен body. Высота body не является полноразмерной высотой.

Есть три варианта для вас:

1. Просто добавьте значение height к .child сделает их высота управляема: JSFiddle

2. Ограничьте .parent высоты как JSFiddle.

3. Если то, что вы хотите each child occupies 1/3 of the screen height, вам нужно определить высоту html, body быть 100% как эта демо: JSFiddle