Flexbox columns inside a flexbox row

Question

In the following code, I have 3 flexbox rows with flexbox columns inside.

The problem I'm facing is: when I have too many columns inside the first row, the other rows are overlapping its content. Also, if I have too few items in row 1, there is some extra space being displayed.

That said, how can I make the rows have a responsive width according the the number os columns they are wrapping?

Codepen link: https://codepen.io/gbaierle/pen/WNgpqEg

<h1>Page Title</h1>

<div id="content">
  <div class="group-container">
    <div class="group">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
  </div>

  <div class="group group-2">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>

  <div class="group group-2">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>

#content {
  padding: 10px;
  background-color: #eee;
  display: flex;
  flex-flow: row wrap;    
  width: 50%;
  box-sizing: border-box;
}

#content .group-container {
  flex: 1 1 auto;
}

#content .group {
  margin: 10px;
  padding: 10px;
  background-color: #ddd;
  display: flex;
  flex-flow: column wrap; 
  max-height: 500px;
}

#content .group-2 {
  flex: 0 1 20%;
}

#content .group .item {
  margin: 10px;
  padding: 10px;
  background-color: #aaa;
  width: 200px;
}