Cracleur
KPCKevin Powell - Community
•Created by Cracleur on 3/24/2025 in #front-end
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/NPWYJbo4 replies