CSS Flexbox: Column order with # of columns determined by available width

I have some content:

<div class=container><div class=item>    item a</div><div class=item>    item b</div>  ...</div>

I would like to display the items in column order, ie:

A  D  GB  E  HC  F  I

And I'd like the number of columns to be based on the available document width. If the viewport is wide then use more, shorter columns:

A  C  E  G  IB  D  F  H

I've tried:

.container {  display: flex;  flex-wrap: wrap;  flex-direction: column;}

But this just results in a single column, regardless of the document width.

I can set a max-height to get multiple columns, but then if the document is resized too small I end up with horizontal scrollbars.

Is there a way using CSS to have the contents ordered in columns, but the wrapping of that content based on available document width?