Então, eu tenho uma caixa flexível com colunas e altura máxima para fazer as colunas se empilharem em três colunas.

Isso funciona bem no Chrome, mas no Safari parece usar apenas a última coluna (à direita) para definir a altura real do contêiner.

Eu fiz um exemplo aqui:

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>

Os resultados no Chrome e no Safari são screencapped abaixo.

Cromada:

Safári:

Parece ser um bug óbvio, mas não consigo encontrar nenhuma informação sobre ele.

O que eu quero saber é:

Existem soluções alternativas para isso? eFoi relatado como um bug?