Flexbox Container Width Broken In Direction Column — Why And How To solve

Tricky Problems & Their Solutions

Today one of my teammate asked me to help her with a problem she was stuck on in CSS.

She tried to create menu with dynamic width using flex box and flex-wrap, simple ha? So no, this is how it’s look:

Code example

Why The Flex Container Width Not Include the break lines?

After searching in the CSS documentation for quite some time trying to figure out what happened I find out that W3 was not the ones to blame.

Apparently, the browsers didn’t implement it correctly because they didn’t take the max-height into account, this is also why you can’t see this problem in “flex-direction: row”, only in column.

Don’t you agree with this comment on the subject in (still opened from 2015) chrome bug?

Grid for The Rescue:

This gird hack will work until the browsers will find a solution.

Code example

To summer up, @chrome, @firefox, please fix this issue and make column wrap great 🙏🏻