У меня возникла проблема при использовании flexbox.
Я использую контейнер с flex-direction: column; flex-wrap: wrap
, поэтому мои внутренние элементы могут быть помещены в несколько столбцов.
Проблема заключается в том, что браузер по-прежнему вычисляет ширину контейнера как сумму внутренних элементов ширины!
Мой контейнерный блок должен иметь меньшую ширину (в зависимости от размера содержимого), но на самом деле он огромен.
В любом случае, очень неестественно вычислять ширину контейнера при использовании столбцов, а не строк.
Взгляните на зеленый блок в моем коде. У этого есть огромный, но он не должен иметь так. Кроме того, он становится меньше при удалении элемента из контейнера.
Я ожидаю, что контейнер будет иметь небольшую ширину, поэтому он не займет больше половины свободного места.
Проверено это на последних версиях Safari и Chrome на последней версии ОС.
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background: #aa0000;
height: 100px;
}
.group {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
}
.g1 {
background: #00aa00;
}
.g2 {
background: #0000aa;
}
<div class="container">
<div class="group g1">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="group g2">
<div class="item">Item</div>
</div>
</div>