Comment utiliser les colonnes d'une grille pour envelopper le flexible horizontalement ?

Question

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

J'ai réussi à créer une flexbox avec un défilement vertical qui remplit l'espace horizontalement et défile vers le bas.

Je souhaite faire la même chose horizontalement, c'est-à-dire remplir l'espace verticalement et faire défiler vers la droite.

Mon flex div se trouve à l'intérieur d'une grid

Qu'est-ce que j'ai raté?

Answer 1

Vous devez définir une hauteur sur votre flexbox. Dans ce cas, le simple ajout de height: 400px à la classe .flex-columns résoudra le problème.

La raison est que votre flexbox suppose qu'elle peut être aussi haute que possible, et comme la direction de flexion est définie sur les colonnes, elle met tout dans une seule colonne. Il est plus facile de visualiser lorsque la flexbox est une rangée !