Использование процентных значений для заполнения элементов flexbox

Question

Я использую флексбоксы в Google Chrome (должен поддерживаться только этот браузер) для создания динамического макета.У меня есть n дочерних элементов в одном элементе div, который должен разделять все пространство с одинаковым соотношением.Это работает без проблем благодаря новым введенным flex-боксам.Но мне также пришлось установить высоту каждого внутреннего div на 0. Если я хочу растянуть элемент внутри этого div до 100% высоты, он использует заданное значение 0 вместо любого вычисленного значения.Поскольку я выбрал flex-box для предотвращения использования javascript, я бы предпочел остаться таким.Есть ли другой способ заставить высоту изображения заполнять div?

А вот код (проверен только в Google Chrome):

html

<div class="flexbox">
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
</div>

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%;
            }

Код для просмотра в браузере

Answer 1

Ну, у меня все заработало после нескольких часов исследований.Необходимо внести следующие изменения:

.flexbox {
            display:-webkit-box;
            -webkit-box-orient:vertical;
            height:300px;
            width:200px;
        }
        .flexbox > div {
            -webkit-box-flex:1;
            height:0;
            border:solid 1px #000000;
            position:relative; /* CHANGE */
        }
        .flexbox > div > img {
            height:100%;
            position:absolute; /* CHANGE */
        }

Если вы заинтересованы в этом, вы можете внести эти изменения через ChromeDevTools в css и вы увидите правильный результат!