Base flexível para agrupar colunas

Eu tenho uma configuração de grade bastante básica no flex, mas recentemente me deparei com uma supervisão que fiz.

Eu tenho colunas que têm uma margem direita: 3em e base flexível: calc (33% - 3em).

Meu problema é que o quarto e o quinto deles não se alinham até que haja uma "linha" completa de 3.

Alguma idéia de por que isso está acontecendo? Imagino que possa estar complicando demais as coisas, como de costume.

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

questionAnswers(2)

yourAnswerToTheQuestion