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

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

Вот код:

<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;
}

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