Flexbox not wrapping items as expected

Question

I need to create a drop down navigation menu which wraps onto two lines when it is really long.

By setting the following CSS properties on the menu I can achieve the desired result.

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

This, however, does not work on Internet Explorer 11. The items do not wrap onto the next line as it does on Chrome.

Here is a jsFiddle

It will work if I use height: 80px instead of max-height: 80px; but that does not work for me as I want the menu to grow with the items.

Does anyone know how I can get IE to wrap the items properly?

Answer 1

Since CSS Flexbox is not fully supported to provided a wrapping menu when the items pass a maximum height I have created a workaround using the height attribute.

As @Michael_B pointed out , the container doesn't wrap around the wrapped items.

A solution to this is apply the background style to the flex items instead of the container like this

This allows the container 'to appear' to grow with the items. Then using the nth-child pseudos I can allow the last item to span the full height of the container.

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