title: Flexbox grow to contain
body: <p>I have a fairly simple thing I'm trying to do here. </p>
  
  <p>I want to have a dynamic list of groups, and each group has a dynamic list of items. I'm trying to display them nicely so that the groups aren't too tall. To do this I've used a <code>max-height</code> property on the list. </p>
  
  <p>However, as you can see if there are several items in a group - while the items are wrapping, the group itself isn't widening to accommodate them. Is there a way to get flexbox to do this - or is a different css framework required? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.height-ruler {
    height: 100px;
    background-color: blue;
    width: 10px;
  }
  
  .groups {
    display: flex;
    flex-flow: row wrap;
    border: solid 3px black;
    margin: 2px;
    padding: 2px;
    width: 500px;
  }
  
  .group {
    display: flex;
    flex-flow: column wrap;
    flex: 1 0 auto;
    border: dashed 1px black;
    margin: 2px;
    padding: 2px;
    max-height: 100px;
  }
  
  .item {
    background-color: pink;
    border: solid 1px red;
    width: 50px;
    height: 20px;
    margin: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;flexy flex&lt;/h1&gt;
  &lt;div class="groups"&gt;
    &lt;div class="height-ruler"&gt;&lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>