title: Get flexbox column wrap to use full width and minimize height
body: <p>I have a container with a fixed width and variable height. I'm filling the container with an unknown amount of elements.
  I'd like the elements to arrange themselves in columns, from top to bottom and then left to right.</p>
  
  <p>I could use <code>column</code>, but I don't know the maximum width of the child elements, so I can't set a <code>column-width</code> or <code>column-count</code>.</p>
  
  <p>I think <code>display: flex</code> with <code>flex-flow: column wrap</code> is the way to go, but if I maintain <code>height: auto</code> on the container, it will generate as a single column without wrapping elements to use all the available width.</p>
  
  <p>Can I convince flexbox to use all the available width and thus minimize the container's height? 
  Would you suggest a different solution?</p>
  
  <hr>
  
  <p>Fiddle: <a href="http://jsfiddle.net/52our0eh/" rel="noreferrer">http://jsfiddle.net/52our0eh/</a></p>
  
  <p>Source:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;These&lt;/span&gt;
      &lt;span&gt;should&lt;/span&gt;
      &lt;span&gt;arrange&lt;/span&gt;
      &lt;span&gt;themselves&lt;/span&gt;
      &lt;span&gt;into&lt;/span&gt;
      &lt;span&gt;columns,&lt;/span&gt;
      &lt;span&gt;using&lt;/span&gt;
      &lt;span&gt;all&lt;/span&gt;
      &lt;span&gt;available&lt;/span&gt;
      &lt;span&gt;width&lt;/span&gt;
      &lt;span&gt;and&lt;/span&gt;
      &lt;span&gt;minimizing&lt;/span&gt;
      &lt;span&gt;the&lt;/span&gt;
      &lt;span&gt;container's&lt;/span&gt;
      &lt;span&gt;height.&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
      outline: 1px solid red;
      width: 100%;
      display: flex;
      flex-flow: column wrap;
      align-items: flex-start;
      /*height: 8em;*/
  }
  span {
      outline: 1px solid blue;
  }
  </code></pre>