CSS FLEX — Manage free space left after wrap

I have a flex defined like seen here: https://codepen.io/Jazzigula/pen/jOdYyYp

At the moment the flex wraps its width doesn't automatically shrink further to the intrinsic size based on the flex items now stacked one on top of the other, but the flex container rather keeps that breakpoint width leaving the empty space on the side.

Is there a way to eliminate that free space but to keep items flush left?

The only way I know to manage the spacing between the items on the main flex axis is through justify-content and margins. But can't find a way to achieve this

Thanks

MarkBoots•11/17/23, 12:59 PM

It'a a bit clear for me to understand what you want to acchieve. Can you make a little sketch of what the result should be?

Igor Petrovic DesignOP•11/17/23, 1:05 PM

Here is the situation right after the flex wraps. It leaves a free space on the side. I would like this space to be eliminated and that flex follow the intrinsic size of the new content order

Igor Petrovic DesignOP•11/17/23, 1:06 PM

I can push the items on the right with the margin-left:auto; but then items are not flushed to the left

Igor Petrovic DesignOP•11/17/23, 1:17 PM

Thanks Mark. However, this makes items grow and take the free space, and I would like items to keep their size, and that flex shrinks to their size

MarkBoots•11/17/23, 1:18 PM

then i don't gate it. so you want the container to shrink?

Igor Petrovic DesignOP•11/17/23, 1:18 PM

Yes, to the width of "ICONS LANGUAGE" item

Igor Petrovic DesignOP•11/17/23, 1:18 PM

to shrink instantly after the wrap

MarkBoots•11/17/23, 1:19 PM

so not when it is full width? (before the wrap)

Igor Petrovic DesignOP•11/17/23, 1:26 PM

I guess I am making some wrong assumptions about how flex works. But I would like the container to be the size of the items always if possible

So let's say there are two items one 200px and the other 400px width.

I set flex-flow: row wrap;

When the viewport hits the 200+400=600px it wraps. So after the wrap the container is 599px, but I would like it instantly to shrink to 400px since it is the width of the wider item.

MarkBoots•11/17/23, 1:33 PM

no, I don't think it is possible. think the container needs to know how wide the children are, and the other way round. it can not be both. So you'll have to use a media query

MarkBoots•11/17/23, 1:33 PM

leave the post open, maybe someone else comes up with an idea that I missed

Jochem•11/17/23, 1:34 PM

yeah, flex lets you use the container to control the size of children dynamically, you can't then also have the children control the parent

MMarkBoots leave the post open, maybe someone else comes up with an idea that I missed

Jochem•11/17/23, 1:34 PM

(though also 100% still this)

MarkBoots•11/17/23, 1:34 PM

i was thinking of float

Igor Petrovic DesignOP•11/17/23, 1:35 PM

Oh no floats, I am afraid

Igor Petrovic DesignOP•11/17/23, 1:36 PM

Kidding, but I am a begginer, if it works why not. Just can't imagine that solution

MarkBoots•11/17/23, 1:36 PM

yea, not ideal. rather use a media query

Jochem•11/17/23, 1:36 PM

especially if you know the size of the items inside with some certainty

Igor Petrovic DesignOP•11/17/23, 1:37 PM

Do you think that container query could help. I stumble upon it while digging the solution

MarkBoots•11/17/23, 1:37 PM

works too, but still you need to know the breakpoint

Igor Petrovic DesignOP•11/17/23, 1:39 PM

Now I see the logic of why it doesn't work. This is very helpful because I always wonder if I might be missing something very basic. I'll try in this direction then, thanks a bunch once again!

MarkBoots•11/17/23, 1:40 PM

np, you're welcome. good luck on the project!

Igor Petrovic DesignOP•11/17/23, 1:42 PM

Thanks!