flexbox - Verhindere, die Breite zu erhöhen, wenn Flex-Grow-Wert angegeben wird

Question

Ich versuche Flexbox zu verwenden, um ein reaktives Gitter aus gleich großen Zellen zu erstellen. Mein Code funktioniert, wenn der Inhalt der Zellen der gleiche ist, aber nicht wenn der Inhalt der Zellen in der Länge variiert - die Zellen passen sich an ihren Inhalt an.

Hier ist, was ich bin nach:
1. ist jede Zelle die gleiche Breite
2. jede Breite passt sich automatisch der Zelle, wenn der Browser geändert wird.

Hier ist mein Code an der Geige: https://jsfiddle.net/v0erefnd/1/

html:

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

css:

.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; 
} 

Dank!

Answer 1

Wenn Sie alle der Flexbox Einzelteile wünschen, die gleiche Breite haben, könnten Sie flex-basis: 100% hinzufügen:

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