flex behaving differently in Firefox / Chrome
Hi there!
Firefox seems to be calculating the required horizontal space for elements inside a flex with
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
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)?
Firefox seems to be calculating the required horizontal space for elements inside a flex with
flex-direction: column and 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 and the number pad 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 and 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)?
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
