弹性框未按预期包装项目

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指出的那样，容器不会包裹包装的物品。

对此的解决方案是将背景样式应用于弹性项目，而不是像这样将容器应用于

容器

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

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