How can I make the last row of a flex box layout with "space-around" not be centered?

Question

I'm using flex box to arrange some equally-sized divs, and I've set justify-content: space-around. This looks great for all the rows except the last one. I'd like any elements in the last row to be even with the left-most divs in the previous rows.

This is what it looks like:

and

And this is what I would like:

and

How can I achieve this?

Currently, I have this CSS:

#container {
  display: flex;
  flex-flow: row wrap;
  max-width: 400px;
  border: 1px solid red;
  justify-content: space-around
}

#container > div {
  border: 1px solid black;
  width: 110px;
}

With this HTML structure:

<div id="container">
  <div>Content</div>
  <div>Content</div>
  ...
  ...
</div>

Here's a fiddle: https://jsfiddle.net/chrisshroba/q2mm9ccj/