グリッド内の列を使用してフレックスを水平方向にラップするにはどうすればよいですか?

Question

https://codepen.io/itaied246/pen/eYbOWjm

スペースを水平に埋めて下にスクロールする垂直スクロールを備えたフレックスボックスを作成することに成功しました。

同じことを水平方向にも実行したいと考えています。つまり、垂直方向にスペースを埋めて右にスクロールします。

私の flex div は、max-content を持つ対応する grid 内にあります。

私は何を取りこぼしたか？

Answer 1

フレックスボックスの高さを設定する必要があります。この場合、 height: 400px を .flex-columns クラスに追加するだけで問題は解決します。

その理由は、フレックスボックスが可能な限り高さを想定しており、フレックスの方向が列に設定されているため、すべてが 1 つの列に配置されるためです。フレックスボックスを行にすると視覚的にわかりやすくなります。