Así que tengo una caja flexible con columnas y altura máxima para hacer que las columnas se apilen una al lado de la otra en 3 columnas.

Esto funciona bien en Chrome, pero en Safari parece que solo usa la última columna (más a la derecha) para establecer la altura real del contenedor.

He hecho un ejemplo aquí:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 400px;
  padding: 10px;
  border: 1px solid green;
}

div {
  flex-basis: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Los resultados en Chrome y Safari se muestran a continuación.

Cromo:

Safari:

Esto parece ser un error obvio, pero no puedo encontrar ninguna información al respecto.

Lo que quiero saber es:

¿Hay alguna solución a esto? y¿Se ha informado como un error?