Html 如何使用flexbox垂直包装内容？

我在flexbox容器中有三个div

我希望三个

div

显示如下：

+-----------------------------------------------+
|     +-----------------+-----------------+     |
|     |                 |                 |     |
|     |                 |                 |     |
|     +-----------------+-----------------+     |
|                                               |
|     +-----------------------------------+     |
|     |                                   |     |
|     |                                   |     |
|     +-----------------------------------+     |
|                                               |
+-----------------------------------------------+

因此，容器必须垂直地适应其内容，但仅适应其内容，而不仅仅是内容

我在

div

之间得到了很大的空白，而容器得到了父容器的100%高度

我没有将

height

属性放入容器，也没有设置

height:auto但它们都不起作用

以下是我的代码：


*{
框大小：边框框；
}
html，正文{
宽度：100%；
保证金：0；
}
#容器{
显示器：flex；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
证明内容：中心；
对齐项目：居中；
柔性包装：包装；
最大宽度：450像素；
边框：1px实心；
}
#第一组{
宽度：50%；
高度：155px；
背景颜色：蓝色；
}
#第二组{
宽度：50%；
高度：155px；
背景色：红色；
}
#第三组{
宽度：70%；
高度：155px；
背景颜色：绿色；
}
创建flex容器时，初始设置为
对齐内容：拉伸

这会导致多行flex项在容器的整个长度上分布

使用
#container
上的
align content:flex start
覆盖此设置


要使容器垂直收缩包装其内容，需要删除此规则：

#container { bottom: 0; }

由于
#容器
是绝对定位的，并且没有定位的父元素，这将为
#容器
建立包含块，因此默认包含块成为初始包含块或视口

这就是容器从上到下伸展的原因，如您应用的黑色边框所示。一旦删除
bottom:0
，容器的行为将更像
height:auto

在此处了解有关CSS定位的更多信息：
谢谢！这是非常接近，但不完全是我要找的。它仍然不能使容器的高度适应其内容物。只需将内容放在一起（两种方法之一）。看，我有
bottom:0
，因为我想让容器在屏幕上垂直和水平居中。我想我现在必须找到另一种方法使它居中。要使容器在屏幕上居中，只需使用另一个flex容器：谢谢！对不起，回信太晚了。我考虑过，但我也怀疑在
主体
标签上添加
flex
是否是个好主意。现在你澄清了我的想法。再次感谢：）当然。你是我最好的帮手之一：）