Flexbox grow to contain

Question

I have a fairly simple thing I'm trying to do here.

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 max-height property on the list.

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?

.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;
}

<h1>flexy flex</h1>
<div class="groups">
  <div class="height-ruler"></div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>