title: How can I make a display:flex container expand horizontally with its wrapped contents?
body: <p>When using css <code>flexbox</code> the three main browsers appear to behave entirely differently in certain areas.</p>
  
  <p>In this case I am trying to create a grid of images:</p>
  
  <pre><code>&lt;div class="container"&gt;
       &lt;div class="photo"&gt;&lt;/div&gt;
       &lt;div class="photo"&gt;&lt;/div&gt;
       &lt;div class="photo"&gt;&lt;/div&gt;
       &lt;div class="photo"&gt;&lt;/div&gt;
       &lt;div class="photo"&gt;&lt;/div&gt;
       &lt;div class="photo"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  .container {
      display:inline-flex;
      flex-flow : column wrap;
      align-content : flex-start;
      height : 100%;
  }
  </code></pre>
  
  <p>In this example I need a container, itself containing several <code>div</code> elements set up to flow from top to bottom and wrapping when they reach the bottom.  Ultimately providing me with columns of photos.</p>
  
  <p>However I need the container to expand horizontally to accommodate the wrapped elements:</p>
  
  <p>Here is a quick <a href="http://jsfiddle.net/f7Ku8/3/">jsFiddle</a> to demonstrate.</p>
  
  <p>The behaviour is as follows:</p>
  
  <ul>
  <li><strong>IE 11</strong> - Correct, the container stretches horizontally to wrap each column of wrapped elements</li>
  <li><strong>Firefox</strong> - The container only wraps the first column of elements, with the rest overflow out.</li>
  <li><strong>Chrome</strong> - The container always stretches to fill the width of its parent, whatever that may be.</li>
  </ul>
  
  <p>In this instance I would like to achieve the behaviour of IE11 in the other two browsers.  Therefore my question is, how can I make a <code>flexbox</code> container expand horizontally to match its <code>column wrap</code> contents.</p>
  
  <p>Thanks in advance.</p>