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

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 🙏🏻




Front-End Developer at Outbrain & Pull Request community leader

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Beginner’s guide to cloud deployment

Performance as a feature

Learn Double Jump in Unity

Kubernetes workflow in short

Building Application with High Availability with AWS

SQL Interview — how to prepare and land in the job #4

Microsoft Excel Features and Concepts that Everyone (Including Developers) Should Know

Tech Stack 2019: Persistence

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michal Porag

Michal Porag

Front-End Developer at Outbrain & Pull Request community leader

More from Medium

HTML Forms

CSS Combinators: Types and How to use them?

Shortstyle  — Simplest CSS framework ever !

Change the page title dynamically with JavaScript, when a user switches tabs