flexbox - предотвратить увеличение ширины при указании значения flex-grow

Question

Я пытаюсь использовать flexbox для создания чувствительной сетки одинаковых по размеру ячеек. Мой код работает, если содержимое ячеек одинаковое, но нет, если содержимое ячеек изменяется по длине - ячейки меняются в зависимости от их содержимого.

Вот что я после:
1. каждая клетка имеет ту же ширину
2. каждой ячейки ширина автоматически меняет, когда браузер изменяет размер.

Вот мой код на скрипку: 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; 
} 

Спасибо!

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