Css 当只有较少的项目时，将“弹性容器高度”设置为“弹性项目内容高度”

我正在尝试为我的一家电子商务商店创建超大菜单。为此，我使用flex box布局

在mega菜单中，有一些子类别需要按列显示

因此，我可以在父类flex容器上设置

flex direction

为

column

，但问题是，当flex项目包装在第二列时，flex容器的宽度不会增加，正如在下面的问题中多次提到的那样

为此，正如flex box bugs中提到的

如果容器具有固定高度（通常是启用换行时），可以使用flex-flow:row-wrap（注意行而不是列）避免此错误，并通过更新容器的写入模式（并在项目上重置）来伪造列行为。演示14.1.b展示了一个在所有现代浏览器中使用的示例。

我制作了这把小提琴作为插图。我想做的是，只有当flex项的数量少于flex项或者容器的高度超过某个值（比如300px）时，才将flex项推到第二列（使其包裹）

这是具有可变内容的flex item-1。
这是具有可变内容的flex item-2。
这是具有可变内容的flex item-3。
这是具有可变内容的flex item-4。
这是具有可变内容的flex item-5。

我想让它们基于父级的最大高度进行包装，否则flex容器应该只根据内容高度使用高度

我不希望flex容器具有固定高度，但仍然希望布局与fiddle相同。

---

有可能吗？

我想这是FlexBox所能做到的。。。如果行数是常数，那么这里有一个css网格解决方案，让我知道这是否符合您的用例…行也不是常数。它可以是类别内任意数量的子类别，因此可以有可变行。我想这就是FlexBox所能做到的。。。如果行数是常数，那么这里有一个css网格解决方案，让我知道这是否符合您的用例…行也不是常数。它可以是类别内任意数量的子类别，因此可以有可变行。

<div class="flexcontainer">
<div class="flexitem">This is flex item-1 with variable content.</div>
<div class="flexitem">This is flex item-2 with variable content.</div>
<div class="flexitem">This is flex item-3 with variable content.</div>
<div class="flexitem">This is flex item-4 with variable content.</div>
<div class="flexitem">This is flex item-5 with variable content.</div>
</div>