CSS Columns layout with dynamic overflow-x

Please see the included code.
- Why is my <main>container overflowing vertically instead of horizontally?
- Why does it work when I set a fixed height on it? It should simply fill the available height it can have, and overflow on x dynamically.

Many thanks for any assistance. I had expected this to be very easy, but instead it's made me hate CSS again.
Was this page helpful?