Высота гибкого элемента не уважается, если отображение: таблица установлена? ⇐ Html

[Anonymous]

http://jsfiddle.net/u2zedzob/12/


*,
*:before,
*:after {
box-sizing: border-box;
}

.wrapper {
background-color: red;
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
}

.main-content {
height: 100%;
width: 100%;
background-color: green;
}

.footer {
height: 30px;
width: 100%;
background-color: blue;
display: table;
}< /code>



< /code>
< /div>
< /div>
< /p>
В этом примере высота нижнего колонтитула составляет 30px, а основной контент растет до Заполните остальную часть пространства. Идеально! Это также может быть предотвращено, установив майс нижнего колонтитула до 30px. < /P>
Я не слишком знаком с Flex Logic. Почему это происходит? Есть ли более элегантное решение, где будет уважается высота нижней части нижней части? Может быть, гибкое свойство, которое мне не хватает?


Подробнее здесь: https://stackoverflow.com/questions/254 ... ble-is-set