Esnek kutu öğelerini doldurmak için yüzde değerlerini kullanma

Question

Dinamik bir düzen oluşturmak için Google Chrome'da (yalnızca bu tarayıcının desteklemesi gerekir) flexbox kullanıyorum. Bir boşluk elemanında, tüm alanı aynı oranla paylaşması gereken n alt öğeleri var. Bu yeni eklenen esnek kutular nedeniyle sorunsuz çalışıyor. Ama aynı zamanda her bir içsel divun yüksekliğini 0'a ayarlamak zorunda kaldım. Eğer bu div içindeki bir elemanı% 100'e kadar uzatmak istersem, hesaplanan değer yerine 0 değerini kullanır. Javascript kullanımını engellemek için esnek kutular seçtiğim için bu şekilde kalmayı tercih ederim. Görüntüyü, div'u dolduran yüksekliği yapmanın başka bir yolu var mı? Burada

Ve

(sadece Google Chrome'da test) kodudur:

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

Eh saat sonra çalışma var Araştırma. Aşağıdaki değişiklikler yapmak şunlardır:

.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 */ 
     } 

Eğer css ChromeDevTools aracılığıyla bu değişiklikleri yapabilirsiniz sana intrested konum ve doğru bir sonuç görürsünüz!