Chrome/Safari не заполняет 100% высоту гибкого родительского элемента ⇐ CSS

[Anonymous]

Я хочу иметь вертикальное меню определенной высоты.

Каждый дочерний элемент должен заполнять высоту родительского элемента и иметь текст, выровненный по середине.

Количество дочерних элементов является случайным, поэтому мне приходится работать с динамическими значениями.

Div .container содержит случайное количество детей (

Код: Выделить всё

.item

), которые всегда должны заполнять высоту родительского элемента. Для этого я использовал flexbox.

Для создания ссылок с текстом, выровненным по середине, я использую метод display: table-cell. Но для отображения таблиц требуется использовать высоту 100%.

Моя проблема в том, что .item-inner { height: 100% не работает в webkit ( Хром).


[*]Есть ли решение этой проблемы?
[*]Или есть другой способ заставить все .item заполнить высоту родительского элемента текстом, выровненным по вертикали по середине?


Пример здесь: jsFiddle, его следует просматривать в Firefox и Chrome

Код: Выделить всё

.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}

Код: Выделить всё

Button




Button




Button

Подробнее здесь: https://stackoverflow.com/questions/336 ... lex-parent