Flexbox未按预期包装项目

Question

我需要创建一个下拉导航菜单，当它很长时会包裹在两行上。

通过在菜单上设置以下CSS属性，我可以获得所需的结果。

.dynamic {
  position: absolute;
  max-height: 80px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

但是，这在Internet Explorer 11上不起作用。这些项目不会像在Chrome上那样换行到下一行。

这是jsFiddle

如果我使用height: 80px代替max-height: 80px;，它会有效，但这对我不起作用，因为我希望菜单随着项目一起增长。

有谁知道如何让IE正确包装物品？

Answer 1

由于CSS Flexbox不完全支持在项目超过最大高度时提供包装菜单，因此我使用height属性创建了一个变通方法。

作为@Michael_B pointed out，容器不会包裹已包装的项目。

对此的解决方案是将背景样式应用于flex项而不是容器like this

这允许容器“出现”随项目一起增长。然后使用nth-child伪，我可以允许最后一个项目跨越容器的整个高度。

.dynamic > li:nth-child(4n),
.dynamic > li:last-child:nth-child(n+4) {
    flex: 1 0 auto;
}