फ्लेक्सबॉक्स - फ्लेक्स-ग्रोथ वैल्यू

Question

निर्दिष्ट करते समय चौड़ाई बढ़ाने से रोकें मैं समान रूप से आकार वाले कोशिकाओं के उत्तरदायी ग्रिड बनाने के लिए फ्लेक्सबॉक्स का उपयोग करने की कोशिश कर रहा हूं। मेरा कोड काम करता है यदि कोशिकाओं की सामग्री समान है, लेकिन यदि कोशिकाओं की सामग्री लंबाई में भिन्न नहीं होती है - तो कोशिकाएं अपनी सामग्री को समायोजित करने के लिए फिर से समायोजित करती हैं। जब ब्राउज़र का आकार बदलने पर
1. हर कोशिका में एक ही चौड़ाई
2. प्रत्येक कक्ष की चौड़ाई ऑटो को व्यवस्थित करता है:

यहाँ मैं क्या कर रहा हूँ के बाद है।

यहाँ बेला पर मेरे कोड है: https://jsfiddle.net/v0erefnd/1/

एचटीएमएल:

<div class="flex-container"> 
    <div class="flex-item">1</div> 
    <div class="flex-item">100</div> 
    <div class="flex-item">10,000</div> 
    <div class="flex-item">1,000,000</div> 
    <div class="flex-item">100,000,000</div> 
    <div class="flex-item">10,000,000,000</div> 
    <div class="flex-item">1,000,000,000,000</div> 
</div> 
<div class="flex-container"> 
    <div class="flex-item">100</div> 
    <div class="flex-item">100</div> 
    <div class="flex-item">100</div> 
    <div class="flex-item">100</div> 
    <div class="flex-item">100</div> 
    <div class="flex-item">100</div> 
    <div class="flex-item">100</div> 
</div> 

सीएसएस:

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row; 
    justify-content: space-around; 
    height: 50px; 
    line-height:30px; 
} 

.flex-item { 
    /*todo: how to prevent the flexbox to resize to accommodate the text?*/ 
    background: tomato; 
    margin: 10px 5px; 
    color: white; 
    font-weight: bold; 
    font-size: 1.5em; 
    text-align: center; 
    flex-grow: 1; 
    overflow: hidden; 
} 

धन्यवाद!

Answer 1

आप एक ही चौड़ाई flexbox आइटम के सभी चाहते हैं, आप flex-basis: 100% जोड़ सकते हैं:

Updated Example

.flex-item { 
    background: tomato; 
    margin: 10px 5px; 
    color: white; 
    font-weight: bold; 
    font-size: 1.5em; 
    text-align: center; 
    flex-basis: 100%; 
    overflow: hidden; 
}