я есть довольно простая настройка сетки в flex, но недавно я наткнулся на недосмотр, который я сделал.

У меня есть столбцы с полем справа: 3em и flex-based: calc (33% - 3em).

Моя проблема в том, что 4-й и 5-й из них не выстраиваются в линию, пока не будет полный «ряд» из 3.

Любое понимание того, почему это происходит? Я предполагаю, что я могу усложнять вещи, как обычно.

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