Firefox flexbox column wraps, but parent width doesn’t expand (works fine in Chrome)
TL;DR: Chrome expands the flex container’s width when items wrap into new columns. Firefox doesn’t grow the container width (it stays as wide as the longest item)
Hello, I’m running into a frustrating flexbox quirk in Firefox.
I have a container using
flex-direction: column; flex-wrap: wrap; with a fixed height. Once there’s no more vertical space, items wrap into a new column as they should. In Chrome, once items start wrapping into additional columns, the parent container’s width automatically grows to fit those new columns. In Firefox, the items do wrap into new columns, but the parent container’s width stays stuck at the size of the longest item (as if it hadn't wrapped), instead of expanding to hold all columns.
I’ve tried using inline-flex, width: auto;, width: fit-content, etc., but Firefox still just locks onto the width of the longest item.
If you manage to get Firefox to behave (or know an alternative layout technique to emulate column wrapping that works in this case), please share some insight because I'm really stuck . Here’s a CodePen showing the exact behavior:
https://codepen.io/cracleur/pen/NPWYJbo3 Replies
I believe that this is a known browser issue that was present in most browsers for a long time.
One "hack" that appears to work (just tested it on your code) is, rather than define the flex-direction you define the text direction , rotating it on the parent container and then rotating it back on the child elements
You can see my test, forked from your code here (I will delete later). I added a
resize handle on the container so you can see it in action.Thanks for your reply. You really helped me solve the part I had on CodePen. However, it seems to have introduced some new issues I can’t figure out: the width of the parent container (which includes several parts from the CodePen example) isn’t adjusting correctly, and it’s happening even on Chrome this time. When I load the page, its width is slightly off by less than it should be. Yet, if I change the width to
auto or fit-content, it starts working as intended. But as soon as I refresh, the problem comes back. It’s as if simply switching the value once (from auto to fit-content or vice versa) forces it to update correctly, and I can’t understand why.
Unfortunately, I can’t share the exact code because it’s under my company’s copyright, and I also can’t manage to reproduce the new issue in a simplified CodePen example. Still, if you or anyone else has an idea of what might be causing it or has another solution to the original CodePen, I’d love to know. To give a better picture of the overall layout I’m trying to achieve, I’ve attached a mockup I made in Paint using my very professional graphic design skills.
In the meantime, I’ll mark my original question as resolved in a moment if no one else has an idea and will create a new post if necessary in the future.
Not sure if it would give you the desired result, but since you want them in columns, and then "wrap" into a new row, could you use
columns isntead?
Also only really becomes useful when you have a specific height to work within, which you have.
The number of columns is optional, but will set an upper bounds, with the width being the "ideal" width.