I’m facing an interesting CSS issue and was hoping someone might have a solution.
I have a flex container with multiple “parent” elements, each containing “child” elements. The setup is as follows:
- Each parent is a flex item within a row (
flex-direction: row). - Each parent contains multiple child elements arranged in a column (
flex-direction: column) withflex-wrap: wrap. - If the children don’t fit within the height-restricted parent, they wrap into a new column.
- Since wrapping requires more space, the parent should expand in width to accommodate them.
This works perfectly in Chrome — the parent grows in width when the children wrap.
However, in Firefox and Safari, the parent does not expand in width. Instead, the wrapped children overflow into neighboring parent elements, breaking the layout.
It seems like Chrome, Firefox, and Safari interpret the Flexbox spec differently in this case.
Does anyone know a workaround to ensure the parent expands properly in all browsers?
Thanks in advance! 😊
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Document</title><style> .grandparent { display: flex; gap: 10px; width: 100%; background: #a7adb2; } .parent { display: flex; background: yellow; flex-direction: column; gap: 10px; flex-wrap: wrap; height: 600px; } .child { width: 200px; height: 200px; background: red; border: 1px solid blue; } .child2 { width: 150px; height: 250px; background: green; border: 1px solid blue; }</style></head><body><div class="grandparent"><div class="parent"><div class="child">kind 1</div><div class="child">kind 2</div></div><div class="parent"><div class="child">kind 1</div><div class="child">kind 2</div><div class="child">kind 3</div><div class="child">kind 4</div><div class="child">kind 5</div></div><div class="parent"><div class="child2">kind 1</div><div class="child2">kind 2</div></div></div></body></html>Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
