title: Flex container width when flex-flow is set to column wrap
body: <p>I have container with fixed height and <code>display: flex</code>. I want it's children to be laid in a column-first manner by setting <code>-webkit-flex-flow: column wrap;</code>.</p>
  
  <p><a href="http://jsfiddle.net/wNtqF/1/" rel="nofollow">http://jsfiddle.net/wNtqF/1/</a></p>
  
  <ol>
  <li><p>Can anyone explain me how chrome calculates the resulting width of the container div (div with green border) and why is leaves so much free space on the right of each red item. What I want is to have the container to have width just to fit all children, without the additional empty space.</p></li>
  <li><p>If it's not possible with pure css can you provide me an alternative to achive this?</p></li>
  </ol>
  
  <p>I'm using Chrome <code>v 29.0.1547.76</code></p>
  
  <p>The code to reproduce it is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
      .flex-container {
          position: fixed;
          height: 90%;
  
          padding: 0;
          margin: 0;
          list-style: none;
          border: 6px solid green;
  
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
  
          -webkit-flex-flow: column wrap;
          justify-content: flex-start
          align-content: flex-start;
          align-items: flex-start
      }
  
  
      /** Just to show the elements */
      body {
          margin: 0;
          padding: 0;
      }
      .flex-item {
          background: tomato;
          padding: 5px;
          width: 100px;
          height: 100px;
          margin-top: 10px;
  
          line-height: 150px;
          color: white;
          font-weight: bold;
          font-size: 3em;
          text-align: center;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul class="flex-container"&gt;
          &lt;li class="flex-item"&gt;1&lt;/li&gt;
          &lt;li class="flex-item"&gt;2&lt;/li&gt;
          &lt;li class="flex-item"&gt;3&lt;/li&gt;
          &lt;li class="flex-item"&gt;4&lt;/li&gt;
          &lt;li class="flex-item"&gt;5&lt;/li&gt;
          &lt;li class="flex-item"&gt;6&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>