html - 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;
}