Выровняйте по левому краю последний ряд flexbox, используя пробел и поля [дубликаты]

На этот вопрос уже есть ответ здесь:

Таргетирование флекс-элементов в последнем ряду 3 ответа

У меня есть неизвестное количество элементов в контейнере, которые нужно оборачивать без полей снаружи, но с минимальными полями между ними.

Мне также нужно, чтобы они были оправданыspace-between и последний ряд выровнен по левому краю.

Я пытаюсь сделать это с flexbox, например, так:

.outside {
  border: 1px solid black;
}
.container {
  margin: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container:after {
  content: '';
  flex: auto;
}
.box {
  background: red;
  width: 50px;
  height: 50px;
  margin: 5px;
}
<div class="outside">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Посмотреть JSFiddle

Это работает правильно, за исключением того, что интервал в последнем ряду отключен, как вы можете видеть на скриншоте:

Есть ли способ заставить это работать, если мы не знаем, сколько будет столбцов (используя flexbox или что-то еще, кроме javascript)?

Ответы на вопрос(3)

Ваш ответ на вопрос