Flex-wrap не имеет никакого эффекта, вместо этого контейнер растет [дубликат] ⇐ CSS

[Anonymous]

У меня есть flex-wrap: Wrap, но элементы не переносятся, а вместо этого увеличивается контейнер. Я хочу, чтобы предметы заворачивались, а не контейнер становился выше. Вот пример:

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

1
2
3
4
5
6
7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Вижу высокий контейнер без упаковки:


Но я хочу обертку вместо излишнее увеличение контейнера. Вот эскиз:


Высота контейнера должна определяться другими его дочерними элементами, а не дочерним элементом flexbox, который по какой-то причине отказывается переносить.
Высота flexbox не должна быть каким-то произвольным жестко запрограммированным числом. Флексбокс должен использовать пространство, доступное в его контейнере, а затем переносить его. Высота контейнера должна определяться другими дочерними элементами этого контейнера.
Я ищу решение с помощью CSS, а не JavaScript.
Различные вещи из разных постов, такие как fit-content и height: auto, не работали.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ws-instead