How to use columns in a grid to wrap flex horizontally?

Question

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

I successfully created a flexbox with vertical scrolling that fills the space horizontally and scrolls down.

I want to do the same thing horizontally, i.e. fill the space vertically and scroll to the right.

My flex div is inside a corresponding grid with its max-content.

What did I miss?

Answer 1

You need to set a height on your flexbox. In this case, simply adding height: 400px to the .flex-columns class will solve the problem.

The reason is that your flexbox assumes it can be as tall as possible, and since the flex direction is set to columns, it puts everything into one column. It's easier to visualize when the flexbox is a row!