Высота гибкого контейнера не работает должным образом в Safari
Итак, у меня есть 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 показаны ниже.
Хром:
Сафари:
Кажется, это очевидная ошибка, но я не могу найти информацию об этом.
То, что я хочу знать, это:
Есть ли обходные пути к этому? а такжеЭто было сообщено как ошибка?