Get a flexbox column to use full width and minimize height

Question

I have a container with a fixed width and a variable height. I fill the container with an unknown number of elements. I would like the elements to be arranged in columns from top to bottom, and then from left to right.

I could use column , but I do not know the maximum width of the children, so I can not set column-width or column-count .

I think display: flex with flex-flow: column wrap is the way to go, but if I support height: auto in the container, it will generate as a single column without wrapping the elements to use all available width.

Can I convince flexbox to use the entire available width and thereby minimize the height of the container? Would you suggest a different solution?

---

Fiddle: http://jsfiddle.net/52our0eh/

A source:

HTML:

 <div> <span>These</span> <span>should</span> <span>arrange</span> <span>themselves</span> <span>into</span> <span>columns,</span> <span>using</span> <span>all</span> <span>available</span> <span>width</span> <span>and</span> <span>minimizing</span> <span>the</span> <span>container's</span> <span>height.</span> </div> 

CSS

 div { outline: 1px solid red; width: 100%; display: flex; flex-flow: column wrap; align-items: flex-start; /*height: 8em;*/ } span { outline: 1px solid blue; } 

Answer 1

What you're looking for is more like column rules: DEMO

 div {/* do not set column numbers rule */ width: 100%; -moz-column-width:4em; column-width:4em; -moz-column-gap:0; column-gap:0; -moz-column-rule:solid 1px; column-rule:solid 1px; text-align:center; } 

Answer 2

I compromised and set height: 10em (which seems acceptable) along with overflow-y: auto (to add a horizontal scrollbar in case of overflow) in the container element.

I would still like to know if there is a way to use the entire available width and minimize the height.

Answer 3

In the end, your overflow options are to hide, scroll, or wrap. How about this version? It takes all the overflowed items and puts them on the second line. The elements in the second row still fill the available space, but more because of the fewer elements that divide the space.

http://jsfiddle.net/52our0eh/14/

 div { outline: 1px solid red; display: flex; flex-flow: row wrap; } span { outline: 1px solid blue; flex:1; }