パーセント指定された親要素の幅がCSSのflexブロックの圧縮に与える影響

では、横方向に並んだ5つのフレックス要素があるとしましょう。 親要素の幅はパーセントで指定し、すべての子要素の幅を 100pxに設定します。

以下の例を開き、要素が親要素内に収まらなくなるまで ブラウザのウィンドウを縮小してください。そのためには、 ウィンドウを500px未満に縮める必要があります。 なぜなら、5つの要素があり、それぞれが 100pxだからです。ご存知の通り、このように縮小されると、 ブラウザは要素の幅を強制的に100px未満に縮小し、 親要素内に収まるようにします。では、以下の例をご覧ください。