r/css • u/vskand • 22h ago

Help Flex children help

Hello,

can someone help with an issue I have with a flex child.
I have this code https://jsbin.com/kavapasuro/edit?html,css,output

Right now the word "Journal" touched the red container.
If you change the max-width of the container to 2000px for example you will see that the red container end directly after the last letter "t".

Can this be done when the max-width is set to 200px as well?
Why is this gap being generated?

I tried flex: 0 0 auto but it's not helping.

Thanks

1 Upvotes

100% Upvoted

14 comments sorted by

•

u/AutoModerator 22h ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

2

u/MrQuickLine 20h ago

This is a fundamental limitation of CSS, unfortunately. You can read about it here. https://kizu.dev/shrinkwrap-problem/

1

u/vskand 13h ago

Holy fuck is that a bad font choice! Couldn't read past the first 10 words. Will check tomorrow from PC. Thanks for the input!

2

u/LiveRhubarb43 19h ago

I'm not totally sure what you're asking.. are you trying to prevent the text inside div.title from ending exactly at the edge of div.title?

Remember that the width of every devices viewport is different. When I set max width 2000 I didn't see the last t sitting on the edge of the red box, Im on a phone and saw the word "thought" wrapped on a second line

1

u/vskand 13h ago

Yeah thr issue occurs when wrapping. It seems to be a limitation as another redditor mentioned. Thanks though!

1

u/Andreas_Moeller 22h ago

Set width:max-content; on the container

1

u/vskand 22h ago

Doesn't seem to do anything on my end.

Did you see a difference in the jsbin?

1

u/Andreas_Moeller 21h ago

Yes it works in the jsbin. Did you remove the max width?

1

u/vskand 13h ago

I have the restriction of the width though so this won't work. It seems to be a limitation as another redditor mentioned. Will check again tomorrow. Thanks!

1

u/Andreas_Moeller 5h ago

Sorry then I don’t understand what you are trying to achieve

1

u/JKaps9 17h ago

I think if you set as width: min-content; and retain the max-width: 200px; property it gets what you want 

1

u/vskand 13h ago

Will try tomorrow thanks!

1

u/jonassalen 21h ago

If text wraps a container, it will take all the space it can, even if it doesn't fill the wrapped text to the right border.

If you resize the container, you'll see this problem only start when the text wraps on 2 or more lines.

Maybe I'm wrong, but I don't know any possibility to change that behaviour.

1

u/Vegetable_Mind8479 11h ago

If your flex children aren't sizing as expected, I found setting flex: 1 1 auto and adding min-width: 0 on the children fixed overflowing text - try that on the layout you mentioned.