1

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?

Jackson
  • 3,476
  • 1
  • 19
  • 29
  • 1
    IE is still buggy when max or min size is used with flexbox, but column css should work : https://jsfiddle.net/bnkup2ss/1/ (add prefix for others https://jsfiddle.net/bnkup2ss/3/ ) – G-Cyrillus Apr 26 '16 at 10:42
  • 1
    Yes its known bug. Check here http://caniuse.com/#search=flexbox – Petroff Apr 26 '16 at 10:44
  • @GCyrillus I tried using columns but I would want there to be one column if there are less than 4 items. Thanks though – Jackson Apr 26 '16 at 10:46
  • 1
    It doesn't wrap in IE11 *and* the container doesn't expand to accommodate wrapping items in Chrome or any other browser ([demo](https://jsfiddle.net/bnkup2ss/4/)). Flexbox column wrap is just not ready for prime time. – Michael Benjamin Apr 26 '16 at 10:51
  • @Jackson it does form a single col with 4 li https://jsfiddle.net/bnkup2ss/9/ unless you did reset line-height or font-size where 80px won't match with 4lines https://jsfiddle.net/bnkup2ss/10/ – G-Cyrillus Apr 26 '16 at 11:00
  • @GCyrillus nice, I didn't see that working. I now have a problem where the container does not wrap all the items https://jsfiddle.net/bnkup2ss/11/ – Jackson Apr 26 '16 at 11:05
  • ?? it does, it first reaches your max-height then starts a new column, that's how column or flex column works. (column-fill:balance won't help much here either cause code relays on max-height) – G-Cyrillus Apr 26 '16 at 11:50

1 Answers1

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;
}
Jackson
  • 3,476
  • 1
  • 19
  • 29