3 replies

flex behaving differently in Firefox / Chrome

Hi there!

Firefox seems to be calculating the required horizontal space for elements inside a flex with

flex-direction: column

flex-direction: column

and

flex-wrap: wrap

flex-wrap: wrap

wrong.

The image is what I'm trying to do (and it works well in Chrome).

Basically, what I want to do is have a narrow side bar on the right (beside a number pad) where the side bar's items grow from top to bottom and then left to right. Not enough vertical space => wrap to the next column.

The issue (in Firefox) is getting the bar as narrow as possible. I've made the side bar

flex: 1 0 auto

flex: 1 0 auto

and the number pad

flex: 1000 0 auto

flex: 1000 0 auto

, so that the number pad takes as much space as possible, while the side bar grows just as much as it needs. But Firefox doesn't realize that there are multiple columns when calculating the minimum required size (

min-width: fit-content

min-width: fit-content

and

min-width: max-content

min-width: max-content

yield the exact same wrong width).

I'm probably not allowed to post a link to the actual website, so I've made this: https://jsfiddle.net/y3edck71/2/
(Please see how it behaves very differently in Firefox compared to Chrome)

Anyone got an idea how I can make it, so the side bar is as narrow as possible but also as wide as necessary (while keeping the flow as is)?