Flexbox расти, чтобы

У меня довольно простая вещь, которую я пытаюсь сделать здесь.

Я хочу иметь динамический список групп, и каждая группа имеет динамический список элементов. Я пытаюсь показать их красиво, чтобы группы не были слишком высокими. Для этого я использовал свойство max-height в списке.

Однако, поскольку вы можете увидеть, есть ли в группе несколько элементов - в то время как элементы обертываются, сама группа не расширяется для их размещения. Есть ли способ получить flexbox, чтобы сделать это - или требуется другая css-инфраструктура?

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