I want the columns to change intelligently:

If there is very little text, I want one column only (of a fixed given width, and optionally centered horizontally and optionally centered vertically), until the viewport height is reached. At that point there is one column, filling the available height. Then I want two columns, the first one as high as the viewport, the second one growing as the first one did.

If the entire width of the viewport is exceeded with one or more columns, I want the same column layout continued, but with a horizontal scrollbar added.

This design supports easy reading of any text.

In your Code pen example (http://codepen.io/katydecorah/pen/9b18945fdfdc4d508bbcc336b2034eed) there is a problem when we resize .
Some piece of box appear on the top of few columns.
Is there a reason ?

Just saw the note about specifying how many columns if you use auto.