Итак, у меня есть flexbox со столбцами и max-height, чтобы столбцы складывались рядом друг с другом в 3 столбца.

Это прекрасно работает в Chrome, но в Safari он, похоже, использует только последний (самый правый) столбец для установки фактической высоты контейнера.

Я сделал пример здесь:

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>

Результаты в Chrome и Safari показаны ниже.

Хром:

Сафари:

Кажется, это очевидная ошибка, но я не могу найти информацию об этом.

То, что я хочу знать, это:

Есть ли обходные пути к этому? а такжеЭто было сообщено как ошибка?