Последние дети сетки получают гигантскую причину водостока flexbox пробел между

У меня есть сетка элементов, которую я хочу разделить на 3. Поэтому я хочу, чтобы каждая строка содержала 3 элемента. Поскольку я хочу, чтобы у них был равный желоб, я использовал justify-content: space-between при использовании flexbox. Это выглядело хорошо, пока я не заметил, что когда последняя строка содержит 2 элемента, они просто расщепляются.

.blue{
  width: 420px;
  height: 230px;
  background: blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.red{
  width: 32%;
  height: 100px;
  background: red;
  display: block;
  border-sizing: border-box;
  border: 1px solid white;
}

.green{
  width: 420px;
  height: 230px;
  background: green;
  display: flex;
  flex-wrap: wrap;
}

.orange{
  width: 32%;
  height: 100px;
  background: orange;
  display: block;
  border-sizing: border-box;
  border: 1px solid white;
  margin-right: 1.25%;
}

.orange:nth-child(3){
  margin-right: 0;
}

<section class="blue">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
</section>

<section class="green">
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
</section>

Ответ 1