title: How do I use "flex-flow: column wrap"?
body: <h1>Short version</h1>
  
  <p>When using <code>flex-flow: column wrap</code> and <code>display: inline-flex</code>, it doesn't shrinkwrap like <code>inline-block</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/Es3ch.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/Es3ch.gif" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    var ascending = true;
    setInterval(function() {
      var parent = document.getElementById('flex');
      if (ascending) {
        var child = document.createElement('p');
        child.innerHTML = "foo";
        parent.appendChild(child);
      } else {
        parent.removeChild(parent.children[0]);
      }
      if (parent.children.length &lt;= 1) ascending = true;
      if (parent.children.length &gt;= 40) ascending = false;
    }, 20);
  })();
  (function() {
    var ascending = true;
    setInterval(function() {
      var parent = document.getElementById('failex');
      if (ascending) {
        var child = document.createElement('p');
        child.innerHTML = "foo";
        parent.appendChild(child);
      } else {
        parent.removeChild(parent.children[0]);
      }
      if (parent.children.length &lt;= 1) ascending = true;
      if (parent.children.length &gt;= 40) ascending = false;
    }, 20);
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#flexdesc {position: absolute; top: 25px;}
  #flex {
    top: 50px;
    position: absolute;
    display: inline-flex;
    flex-flow: row wrap;
    outline: 1px solid black;
    padding: 3px;
    max-height: 100%;
    max-width: 180px;
    align-content: flex-start;
    transform: matrix(0, 1, 1, 0, 0, 0);
    transform-origin: top left;
  }
  
  #flex &gt; p {
    margin: 0;
    outline: 1px solid black;
    height: 30px;
    width: 30px;
    align-self: flex-start;
    transform: matrix(0, 1, 1, 0, 0, 0);
  }
  #failexdesc {position: absolute; top: 275px;}
  #failex {
    top: 300px;
    position: absolute;
    display: flex;
    flex-flow: column wrap;
    outline: 1px solid black;
    padding: 3px;
    max-height: 200px;
    align-content: flex-start;
    transform-origin: top left;
  }
  
  #failex &gt; p {
    margin: 0;
    outline: 1px solid black;
    height: 30px;
    width: 30px;
    align-self: flex-start;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="flexdesc"&gt;What I expect it to do&lt;/div&gt;
    &lt;div id="flex"&gt;
      &lt;p&gt;foo&lt;/p&gt;
      
      &lt;!-- add extra "&lt;p&gt;foo&lt;/p&gt;" here. --&gt;
    &lt;/div&gt;
    &lt;div id="failexdesc"&gt;What it does&lt;/div&gt;
    &lt;div id="failex"&gt;
      &lt;p&gt;foo&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Notice how the size of each flex container changes (or doesn't change!)</p>
  
  <p>I want this behavior because I want to place these element side by side for a horizontally scrolling website.</p>
  
  <p><strong>Why doesn't it shrinkwrap? How do I make it shrinkwrap?</strong></p>
  
  <p><br/><br/><br/><br/><hr/></p>
  
  <h1>Original question</h1>
  
  <p><code>flex-flow: row wrap</code> is simple enough to understand. If nothing is "flexing", it acts similar to inline elements; It flows to the right until it can't do so anymore, at which point it makes a new row.</p>
  
  <p><code>flex-flow: column wrap</code> with <code>display: flex</code> is similar. It flows down, until it can't flow down anymore (<code>max-width</code>?), and then starts a new column. Of course, since the parent is  <code>display: flex</code>, it's a block-level element, so that column will be halfway over due to the fact that <code>align-content</code> defaults to <code>stretch</code>. I could easily change that to <code>flex-start</code> to make the new column adjacent to the previous.</p>
  
  <p>...but the container is still too wide. It's still a block, and fills the width of it's parent.</p>
  
  <p><strong>I need the flexbox to shrink-to-fit its columns.</strong> Why? I'm trying to use flexbox in a horizontally scrolling website. Granted, I could just let the children overflow, but that overflowing tends to... break things.
  So I figured I needed <code>flex-flow: column wrap</code> with <code>display: inline-flex</code>. I was hoping for a "top to bottom, left to right" effect, where the parent has no empty space.</p>
  
  <p>...and then <a href="http://jsbin.com/EGEMUfo/6" rel="noreferrer"><strong>this</strong></a> happened. In chrome, the parent width is equal to the sum of the widths of the children, but otherwise, wrapping is normal. In firefox, the parent is full width, and just grows taller to accomodate the elements (I don't think firefox supports wrapping). In IE11, the width is correct, but the children just overflow down (even out of the body). </p>
  
  <p>I'm so confused.</p>
  
  <p>What am I doing wrong here? I understand that flexbox is a more recent feature, but I can't tell how much of this is my fault vs the browser.</p>
  
  <p>By they way, I'm testing this in chrome. A chrome-only solution is fine by me. (But an elegant catch-all solution is always nice!)</p>
  
  <hr>
  
  <p>Here's <a href="http://jsbin.com/EGEMUfo/6" rel="noreferrer">the code for the demo I linked to</a>, in case jsbin is down:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ascending = true;
     setInterval(function() {
       var parent = document.getElementById('flex');
       if (ascending) {
         var child = document.createElement('p');
         child.innerHTML = "f";
         parent.appendChild(child);
       } else {
         parent.removeChild(parent.children[0]);
       }
       if (parent.children.length &lt;= 1) ascending = true;
       if (parent.children.length &gt;= 30) ascending = false;
     }, 200);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#flex {
    display: inline-flex;
    flex-flow: column wrap;
    outline: 1px solid black;
    padding: 3px;
    max-height: 100%;
    align-content: flex-start;
  }
  p {
    margin: 0;
    outline: 1px solid black;
    width: 10px;
  }
  body {
    height: 150px;
    width: 300px;
    outline: 1px dashed black
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=utf-8 /&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="flex"&gt;
      &lt;p&gt;f&lt;/p&gt;
      &lt;!-- add extra "&lt;p&gt;foo&lt;/p&gt;" here. --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>