Css 垂直包裹div

我有一个固定高度的div标签。假设容器的高度是300px。现在我在这个父容器中有多个div。现在这个div的内容是动态的，所以我不知道它将包含多少子元素。如何使父容器垂直包裹子容器？也就是说，如果我有3个子容器，它的高度之和超过300px，那么剩余的应该放在下一列。。下面是一个标记示例

<div class="parent_container">
    <div class="child" id="child_one">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_two">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
</div>

... 
... 
... 

现在让我们假设元素动态生成了这个高度

父容器=高度：300px

儿童1=身高：120px

child_two=高度：100px

儿童三=身高：100px

---

如您所见，父级高度仅为300px。现在，如果我们放置所有三个子容器，它的高度将大于其父容器的高度。所以我想的是垂直包装这个元素。因此，每当子元素的高度超过父元素时，它将自动换行到第二列中。因此，对于本例，

child\u three

应该放在下一列中

是，带有

flex direction:column；柔性包装：包装


.parent\u容器{
高度：300px；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
对齐内容：基线；
}
.孩子{
宽度：50px；
边框：1px纯黑；
框大小：边框框；
}
#一个孩子{
高度：120px；
}
#两个孩子{
高度：100px；
}
#三岁儿童{
高度：100px；
}

... 
... 
... 
... 
... 
... 
... 
... 
... 
...