Почему элементы flexbox не заполняют свободное пространство?

Question

[malcore_hardcore968]

Почему элементы, помеченные зеленым цветом, не заполняют пространство, помеченное красным цветом?

Вот код:

<div class="container">
		<div class="products">
			<div class="product">
				<!-- content -->
			</div>
			<div class="product">
				<!-- content -->
			</div>
		</div>
	</div>

.container {
	width: 100%;
}
.container > .products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

Контейнер здесь без шапки.
Идея была, создать блоки, которые будут независимо от размера занимать все пространство, вот так:

Comments

[Lynn «Кофеман»]

Искать masonry. На флексах так не сделать

Answer 1

[Сергей delphinpro]

Флексбокс так не умеет. И не будет уметь.
На гридах можно замутить нечто такое, но их пока еще нельзя использовать.
Остается один вариант - javascript
Номер один в этом типе задач - скрипт masonry.js

Comments

[malcore_hardcore968]

Окей, спасибо

[Сергей delphinpro]

malcore_hardcore968: есть вариант со смещением Как сверстать макет с неравномерной сеткой?
но это наверное не ваш случай.

Answer 2

[Islam Ibakaev]

callmecavs.com/bricks.js

Comments

[malcore_hardcore968]

Спасибо, посмотрю

[Islam Ibakaev]

malcore_hardcore968: по идее то что ты хотел