So habe ich eine Flexbox mit Spalten und maximaler Höhe, damit die Spalten in 3 Spalten nebeneinander gestapelt werden.

Dies funktioniert in Chrome einwandfrei, in Safari scheint es jedoch nur die letzte (am weitesten rechts stehende) Spalte zu verwenden, um die tatsächliche Höhe des Containers festzulegen.

Ich habe hier ein Beispiel gemacht:

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>

Ergebnisse in Chrome und Safari werden unten auf dem Bildschirm angezeigt.

Chrom

Safari

Dies scheint ein offensichtlicher Fehler zu sein, aber ich kann keine Informationen darüber finden.

Was ich wissen möchte ist:

Gibt es irgendwelche Workarounds dafür? un Wurde es als Fehler gemeldet?