Использование процентных значений для заполнения элементов flexbox
Я использую гибкие блоки в Google Chrome (должен поддерживаться только этот браузер) для создания динамического макета. У меня есть n дочерних элементов в одном элементе div, который должен делить все пространство с одинаковым соотношением. Это работает без проблем из-за новых представленных гибких боксов. Но мне также пришлось установить высоту каждого внутреннего div на 0. Если я хочу растянуть элемент внутри этого div до 100% высоты, он использует данное значение 0 вместо любого вычисленного значения. Поскольку я выбрал гибкие блоки, чтобы избежать использования javascript, я бы предпочел остаться таким.Есть ли другой способ сделать так, чтобы высота изображения заполняла div?
А вот код (протестирован только в Google Chrome):
html
css
.flexbox {
display:-webkit-box;
-webkit-box-orient:vertical;
height:300px;
width:200px;
}
.flexbox > div {
-webkit-box-flex:1;
height:0;
border:solid 1px #000000;
}
.flexbox > div > img {
height:100%;
}