फ्लेक्सबॉक्स आइटम भरने के लिए प्रतिशत मानों का उपयोग

Question

मैं एक गतिशील लेआउट बनाने के लिए Google क्रोम में फ्लेक्सबॉक्स का उपयोग करता हूं (केवल इस ब्राउज़र को समर्थित होना चाहिए)। मेरे पास एक div तत्व में n बाल तत्व हैं जो पूरे स्थान को सभी अनुपात के साथ साझा करना चाहिए। यह नए पेश किए गए फ्लेक्स-बक्से के कारण समस्याओं के बिना काम कर रहा है। लेकिन मुझे प्रत्येक आंतरिक div की ऊंचाई 0 पर भी सेट करना पड़ा। अगर मैं इस div के अंदर एक तत्व को 100% ऊंचाई तक फैलाना चाहता हूं तो यह किसी भी गणना मूल्य के बजाय 0 के दिए गए मान का उपयोग करता है। जैसा कि मैंने जावास्क्रिप्ट का उपयोग रोकने के लिए फ्लेक्स-बक्से चुने हैं, मैं इस तरह से बचना पसंद करूंगा। क्या छवि की ऊंचाई div को भरने का कोई और तरीका है?

और यहाँ कोड (केवल गूगल क्रोम में परीक्षण किया गया) है:

एचटीएमएल

<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> 

सीएसएस

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

यदि आप आप में intrested सीएसएस के लिए ChromeDevTools के माध्यम से ये परिवर्तन कर सकते हैं और आप सही परिणाम देखेंगे!