flexbox - esnek büyüme değeri belirtilirken genişliğin artırılması engelleniyor

Question

Eşit boyutlu hücrelerden oluşan duyarlı bir kılavuz oluşturmak için flexbox kullanıyorum. Kodlarım, hücrelerin içeriği aynıysa, ancak hücrelerin içeriği uzunluk olarak değiştiğinde işe yaramıyor - hücreler içeriğine uyum sağlamak için yeniden ayarlanıyor. tarayıcı yeniden boyutlandırıldığında
1. Her hücre aynı genişliğe
2. Her hücrenin genişliği otomatik ayar yapar geçerli:

İşte sonra ben de.

İşte keman benim kod: 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; 
} 

teşekkürler! Eğer aynı genişliğe sahip FlexBox öğelerin tümünü istiyorsanız

Answer 1

, sen flex-basis: 100% ekleyebilirsiniz:

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