フレックスアイテムの量に関係なく、フレックスコンテナの残りのスペースを占有するはずのCSSクラスを作成しようとしています。固定パーセントがwidthまたはflex-basisであることを意味しません。いくつかの項目は、パディングやボーダーを持っているときFlex-Growはボーダーボックスを考慮しません。バグかどうか？克服する方法は？
.flex-item { flex-grow: 1; flex-basis: 0; }を適用
this answerによると
、しかしas you can see hereは、それがさえボックスのサイズ変更ボーダー・ボックスに設定した後、機能していません。
これはバグですかまたは希望の動作ですか？パディングや枠線に関係なく、任意の数のフレックスアイテムに等しい幅を指定できますか？
これはバグではありません。それは望ましい動作です。
あなたはフレックスアイテムの束を持っている、とflex-basis: 0とflex-grow: 1を適用するには、以下の手順は、ブラウザによって取られている：
flex-grow: 1）最小の（flex-basis: 0）から始まり、コンテナがいっぱいになるまでアイテムに幅を追加し続けます。最後のステップは、問題がある場所です。ブラウザでは要素が最初に0ピクセル幅になるよう強制されず、均等に成長します。ブラウザは最小のものから始まります（2番目に小さいものまで広がっていきますが、その時点でこれらは両方とも成長します）。これはまた、box-sizing: border-boxが機能していない理由です。
これを解決するには、ボーダーボックス部分が適用されている各フレックスアイテムにコンテナを追加します。 This Fiddleを参照してください。私は単純に別のdivに単語をラップし、それにCSSもすべて適用しました（もちろん、フレックスアイテム固有の部分を除いて）