title: When flexbox items wrap in column mode, container does not grow its width
body: <p>I am working on a nested flexbox layout which should work as follows:</p>
  
  <p>The outermost level (<code>ul#main</code>) is a horizontal list that must expand to the right when more items are added to it. If it grows too big, there should be a horizontal scroll bar.</p>
  
  <pre><code>#main {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      /* ...and more... */
  }
  </code></pre>
  
  <p>Each item of this list (<code>ul#main &gt; li</code>) has a header (<code>ul#main &gt; li &gt; h2</code>) and an inner list (<code>ul#main &gt; li &gt; ul.tasks</code>). This inner list is vertical and should wrap into columns when needed. When wrapping into more columns, its width should increase to make room for more items. This width increase should apply also to the containing item of the outer list.</p>
  
  <pre><code>.tasks {
      flex-direction: column;
      flex-wrap: wrap;
      /* ...and more... */
  }
  </code></pre>
  
  <p>My problem is that the inner lists don't wrap when the height of the window gets too small. I have tried lots of tampering with all the flex properties, trying to follow the guidelines at <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">CSS-Tricks</a> meticulously, but no luck.</p>
  
  <p>This <a href="http://jsfiddle.net/4p8fpLms/" rel="noreferrer">JSFiddle</a> shows what I have so far.</p>
  
  <p><strong>Expected result</strong> <em>(what I want)</em>:</p>
  
  <p><img src="https://i.stack.imgur.com/urybZ.png" alt="My desired output"></p>
  
  <p><strong>Actual result</strong> <em>(what I get)</em>:</p>
  
  <p><img src="https://i.stack.imgur.com/YAVx2.png" alt="My current output"></p>
  
  <p><strong>Older result</strong> <em>(what I got in 2015)</em>:</p>
  
  <p><img src="https://i.stack.imgur.com/t5SQd.png" alt="My older output"></p>
  
  <h2>UPDATE</h2>
  
  <p>After some investigation, this is beginning to look like a bigger issue. <strong>All major browsers behave the same way</strong>, and it has nothing to do with my flexbox design being nested. Even simpler flexbox column layouts refuse to increase the list's width when the items wrap.</p>
  
  <p>This <a href="http://jsfiddle.net/nwccdwLw/1/" rel="noreferrer">other JSFiddle</a> clearly demonstrates the problem. In current versions of Chrome, Firefox and IE11, all items wrap correctly; the list's height increases in <code>row</code> mode, but its width does not increase in <code>column</code> mode. Also, there is no immediate reflow of elements at all when changing the height of a <code>column</code> mode, but there is in <code>row</code> mode.</p>
  
  <p>However, the <a href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property" rel="noreferrer">official specs <em>(look specifically at example 5)</em></a> seem to indicate that what I want to do should be possible.</p>
  
  <p>Can someone come up with a workaround to this problem?</p>
  
  <h2>UPDATE 2</h2>
  
  <p>After a lot of experimenting using JavaScript to update the height and width of various elements during resize events, I have come to the conclusion that it is too complex and too much trouble to try to solve it that way. Also, adding JavaScript definitely breaks the flexbox model, which should be kept as clean as possible.</p>
  
  <p>For now, I'm falling back to <code>overflow-y: auto</code> instead of <code>flex-wrap: wrap</code> so that the inner container scrolls vertically when needed. It is not pretty, but it is one way forward that at least does not break useability too much.</p>