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
18 Replies
MarkBoots
MarkBoots12mo ago
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 Design
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
No description
Igor Petrovic Design
I can push the items on the right with the margin-left:auto; but then items are not flushed to the left 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
MarkBoots12mo ago
then i don't gate it. so you want the container to shrink?
Igor Petrovic Design
Yes, to the width of "ICONS LANGUAGE" item to shrink instantly after the wrap
MarkBoots
MarkBoots12mo ago
so not when it is full width? (before the wrap)
Igor Petrovic Design
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
MarkBoots12mo ago
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 leave the post open, maybe someone else comes up with an idea that I missed
Jochem
Jochem12mo ago
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 (though also 100% still this)
MarkBoots
MarkBoots12mo ago
i was thinking of float
Igor Petrovic Design
Oh no floats, I am afraid 🙂 Kidding, but I am a begginer, if it works why not. Just can't imagine that solution
MarkBoots
MarkBoots12mo ago
yea, not ideal. rather use a media query
Jochem
Jochem12mo ago
especially if you know the size of the items inside with some certainty
Igor Petrovic Design
Do you think that container query could help. I stumble upon it while digging the solution
MarkBoots
MarkBoots12mo ago
works too, but still you need to know the breakpoint
Igor Petrovic Design
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
MarkBoots12mo ago
np, you're welcome. good luck on the project!
Igor Petrovic Design
Thanks!
Want results from more Discord servers?
Add your server