Alinear a la izquierda la última fila de flexbox usando espacios intermedios y márgenes [duplicado]

Question

Dec 02, 2016, 05:13 PM

Alinear a la izquierda la última fila de flexbox usando espacios intermedios y márgenes [duplicado]

Esta pregunta ya tiene una respuesta aquí:

Orientación de elementos flexibles en la última fila 3 respuestas

Tengo un número desconocido de elementos en un contenedor que deben envolverse sin márgenes en el exterior, pero con márgenes mínimos entre ellos.

También necesito que estos se justifiquen conspace-between y la última fila a la izquierda alineada.

Estoy tratando de hacer esto con flexbox así:

.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>

Ver JSFiddle

Esto funciona correctamente, excepto que el espacio en la última fila está desactivado, como puede ver en la captura de pantalla:

¿Hay alguna manera de hacer que esto funcione si no sabemos cuántas columnas habrá (usando flexbox u otra cosa que no sea javascript)?