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:
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.
To summer up, @chrome, @firefox, please fix this issue and make column wrap great 🙏🏻
