CSS Flexbox: Обернутые дети не расширяют ширину родителей в Firefox & Safari ⇐ CSS

[Anonymous]

Я столкнулся с интересной проблемой CSS и надеялся, что у кого -то может быть решение. Настройка следующая: < /p>

[*] Каждый родитель - это гибкий элемент в ряду (

Код: Выделить всё

flex-direction: row

).
[*] Каждый родитель содержит несколько дочерних элементов, расположенных в столбце (

Код: Выделить всё

flex-direction: column

) с помощью Flex-wrap: wrap .
Если дети не вписываются в родитель, ограниченный высотой, они обертывают в новый столбец.
Поскольку упаковка требует большего места, родитель должен расширяться по ширине, чтобы приспособить их. Родитель растет в ширине, когда дети обрушиваются. Вместо этого обернутые дети переполняются в соседние родительские элементы, разбивая макет. /> Кто -нибудь знает обходной путь, чтобы убедиться, что родитель правильно расширяется во всех браузерах? < /p>
Заранее спасибо! < /p>

Код: Выделить всё

Document

.grandparent {
display: flex;
gap: 10px;
width: 100%;
background: #a7adb2;
}

.parent {
display: flex;
background: yellow;
flex-direction: column;
gap: 10px;
flex-wrap: wrap;
height: 600px;
}

.child {
width: 200px;
height: 200px;
background: red;
border: 1px solid blue;
}

.child2 {
width: 150px;
height: 250px;
background: green;
border: 1px solid blue;
}





kind 1
kind 2


kind 1
kind 2
kind 3
kind 4
kind 5


kind 1
kind 2

Подробнее здесь: https://stackoverflow.com/questions/794 ... fox-safari