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

Question

Я использую flexboxes в Google Chrome (только этот браузер должен поддерживаться) для создания динамического макета. У меня есть n дочерних элементов в одном элементе div, который должен разделять все пространство с одинаковым соотношением. Это работает без проблем из-за новых внедренных гибких ящиков. Но мне также пришлось установить высоту каждого внутреннего 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%; 
      } 

The code to watch in the browser

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, и вы увидите правильный результат!