flexbox - ngăn chặn tăng chiều rộng khi chỉ định giá trị tăng trưởng flex

Question

Tôi đang cố gắng sử dụng flexbox để xây dựng lưới đáp ứng của các ô có kích thước bằng nhau. Mã của tôi hoạt động nếu nội dung của các ô giống nhau, nhưng không nếu nội dung của các ô có độ dài khác nhau - các ô sẽ điều chỉnh lại để chứa nội dung của chúng.

Dưới đây là những gì tôi đang sau:
1. mỗi tế bào là chiều rộng cùng
2. mỗi tế bào chiều rộng tính năng tự động Điều chỉnh khi trình duyệt được thay đổi kích cỡ.

Đây là mã của tôi trên fiddle: 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; 
} 

Cảm ơn!

Answer 1

Nếu bạn muốn tất cả các mục flexbox có chiều rộng tương tự, bạn có thể thêm 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; 
}