css - 垂直包裹div

Question

我有一个具有固定高度的 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>

现在假设该元素具有动态生成的高度

1. parent_container = height: 300px;
2. child_one = 高度:120px;
3. child_two = 高度:100px;
4. child_three = 高度:100 像素；

如您所见，父级高度仅为 300 像素。现在，如果我们放置所有三个子容器，它的高度将高于其父容器。所以我在想的是垂直包装这个元素。因此，只要子元素的高度超过父元素，它就会自动换行到第二列。所以对于这个例子，child_three 应该放在下一列

Answer 1

是的，使用 flex-direction: column; flex-wrap: 包裹;

.parent_container {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: baseline;
}
.child {
  width: 50px;
  border: 1px solid black;
  box-sizing: border-box;
}
#child_one {
  height: 120px;
}
#child_two {
  height: 100px;
}
#child_three {
  height: 100px;
}

<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 class="child" id="child_three">... <!-- 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 class="child" id="child_three">... <!-- 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 class="child" id="child_three">... <!-- 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 class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
</div>