Tengo una configuración de cuadrícula bastante básica en flex, pero recientemente me topé con un descuido que hice.

Tengo columnas que tienen un margen derecho: 3em y flex-base: calc (33% - 3em).

Mi problema es que el 4to y 5to de estos no se alinean hasta que hay una "fila" completa de 3.

¿Alguna idea de por qué está sucediendo esto? Me imagino que puedo estar complicando las cosas como de costumbre.

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: 33%;
  flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  text-align: center;
}

<section>
  <div class="flex wrap">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

Codepen