Inline-Flex父级不包括子级

Question

我有固定高度的容器（蓝色），该容器应彼此相邻显示。每个容器将具有不同数量的盒子（绿色），应按列订购，例如像这样：

我尝试了以下代码：

.container {
	height: 300px;
	background-color: blue;
	display: inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.box {
	width: 50px;
	height: 50px;
	background-color: green;
	margin: 2px;
}

<div class="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>
<div class="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

相反，它看起来像这样：

我的问题是，容器仅包含第一行，而不包含其他行-因此第二个容器位于错误的位置。该如何解决？