CSSにおけるスペース不足時のflexブロックの圧縮

例えば、親要素内に横並びに配置された3つのフレックスブロックがあるとします。 各子ブロックの幅は100pxに、親要素の幅は300pxに設定されています:

ここで、子ブロックの合計幅が親要素の幅を超えるように、より多くのブロックを追加してみましょう。 この場合、予期しない現象が起こります。子ブロックには明示的に幅が指定されているにもかかわらず、 それらが親要素内にすべて収まるように、ブロックの幅が縮小されてしまうのです。