パーセント値を使ってフレックスボックスアイテムを塗りつぶす

Question

Google Chromeでフレックスボックスを使用しています（このブラウザのみサポートする必要があります）。私はすべての同じ比率でスペースを共有する必要がある1つのdiv要素にn個の子要素を持っています。これは、新しく導入されたフレックスボックスのために問題なく動作しています。しかし、各内部divの高さを0に設定する必要もありました。このdiv内の要素を100％の高さに伸ばしたい場合は、計算された値の代わりに0の指定値を使用します。 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 */ 
     } 

あなたはCSSにChromeDevToolsを経由してこれらの変更を行うことができますし、正しい結果が表示されますにintrestedている場合は！