title: Flexbox columns overlap
body: <p>I am trying to mimic the WinJS grouped list view using flexbox. I am getting close (I think) except that the columns overlap when resizing.</p>
  
  <p><a href="http://jsfiddle.net/w8ts4Lnx/5/" rel="noreferrer">http://jsfiddle.net/w8ts4Lnx/5/</a></p>
  
  <p>I want the items to stay inside the group and let the group grow horizontally.</p>
  
  <pre><code>body {
      height: 100%;
      display: flex;
      flex-flow: column wrap;
  }
  
  h1 {
     padding: 1em;
  }
  
  #content {
      padding: 10px;
      background-color: #eee;
      display: flex;
      flex-flow: row nowrap;
      flex-grow: 1;
  }
  
  #content &gt; .group {
      margin: 10px;
      padding: 10px;
      border: 1px solid #cfcfcf;
      background-color: #ddd;
      display: flex;
      flex-flow: column wrap; 
      max-height: 600px;    
  }
  
  #content &gt; .group .item {
      margin: 10px;
      padding: 10px;
      background-color: #aaa;
      width: 200px;
  }
  </code></pre>
  
  <p>Any ideas what I'm missing?</p>