Foundation-sites: Flex: Menu items overflowing container if to many

Created on 21 Apr 2017 · 2Comments · Source: foundation/foundation-sites

How to reproduce this bug:

Make a menu with many items
Put that menu in a container that has a smaller width than the items
Menu will overflow the container

What should happen:

Menu items should start a new row if they can't fit on just one (i guess)

Browser(s) and Device(s) tested on:

Chrome/Android/IE/EDGE

Test case link:

https://codepen.io/wecodeart/pen/oWxazj

Sorry for not making a better pen, hope you understand what I mean.
Suggestions ? Bug or working as intended (I hope not)

Flex Grid menu 🐛bug

Source

BicanMarianValeriu

Most helpful comment

So this is coming from the .horizontal classes having flex-wrap: nowrap;.
To be honest I have no idea why that's there - @rafibomb any reason you know of why that can't be changed to wrap?

brettsmason on 21 Apr 2017

👍2

All 2 comments

@BicanMarianValeriu Bro, i must say you love wrapping/non-wrapping :D

cc / @brettsmason on looking into it!

IamManchanda on 21 Apr 2017

😄1

So this is coming from the .horizontal classes having flex-wrap: nowrap;.
To be honest I have no idea why that's there - @rafibomb any reason you know of why that can't be changed to wrap?

brettsmason on 21 Apr 2017

👍2

Was this page helpful?

0 / 5 - 0 ratings