出来るようになる事

親要素のサイズが変更された時、真ん中の状態を経由せずに、縦並びと横並びを切り替える

画像引用元

なぜこの処理が必要？

一部の要素だけが大きくなると、大きく表示される要素をオススメのコンテンツだと勘違いしてしまう事があるから

で子要素のサイズが自動で変更されるようになりました。

flex-basisは、子要素の基本幅（子要素になってほしいサイズ）を設定します。すると、Flexbox内で、なるべくflex-basisに指定したサイズに近づくようにブラウザが調整してくれます。

flex-basisで999remや-999rem等の値を設定すると、なるべく要素を大きく又は小さくしようとします。

しかし、min-widthとmax-widthによって阻まれるので、999remの時はmax-widthで指定されたサイズである100%に、

-999remの時は

このように値が無効になり、min-widthで設定された33%になります。
(最初と同じ状態)

画像引用元

calc(40rem - 100%) この計算を行う事で、親要素が40rem以上の時に結果が負になり、40remより小さい時に正の数になります。

これを利用して

flex-basis: calc(40rem - 100%) * 999);

とする事で、flex-basisに非常に高い値または非常に低い値を設定します。そして、このような状況では999を使うのが一般的なようです。

ビューポートのサイズに関係なく利用出来るので、任意の横幅の親要素内で利用する事が出来る

間違い・アドバイスがあれば是非教えて下さい！