Quick note: I mispoke when I said flex: 1; will make it a flex-shrink: 0. It makes it flex-grow: 1; flex-shrink: 1; and flex-basis: 0; You'd almost never notice the difference as long as the flex-basis is 0, but still, I did make a mistake there, sorry about that!
@@eioluseyi I read his comment. Usually these situtations happen for buttons and most of the time buttons dont have long text taking up more than 100px width so white-space-nowrap rarely is problematic on mobile.
that's because you've been writing CSS since the dawn of time. I'm constantly aghast at the improvements of the cascade behavior and element addressing. Why people still use SCSS is becoming increasingly questionable. If you're a skilled front end dev, there really shouldn't need to be a need for any of the frameworks any longer. same for javascript and HTML.
This is brilliant! Coincidentally, I had to make a small change to an older website today. And I noticed they have a similar issue with two buttons, because the client's changed the text on the buttons. It's bothered me for years at this point. I'm applying this there right away!
@@KlethonioFerreira it unfortunately doesn't because the minimum width of one button is less than the other. Only giving the buttons a fixed minimum width will keep them equal in size.
@@Pixelarter I am imagining you can only achieve that in grid by providing a fixed minimum width, which can also be done in flexbox. So unless I'm wrong and there's another way to do it in grid, I am not seeing the advantage.
@@Sagan1995 You are right. I thought maybe it was possible to do something like _grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr)),_ and get them to always be the same size when squished. But it's not possible to use _min-content_ in this case, it only accepts an explicit value.
I fixed this with white-space: preline; but wasnt a fan how it ended in the end. This solution seems much better. Preline would just force the text not to break, but also had to add prettier ignore so it doesnt break the line. Takes a bit more setup. Thanks a lot Kevin for this solution, much appreciated :D
Bloody hell that's a nice solution. I was literally working on the same problem last night. But this blows my solution out of the water. Gonna use this right away. Thanks.
I love this format, short gem, one subject, great for archiving for reminding yourself later. Btw. thank you VERY MUCH for being consistent I don't even remember for how long and presenting code and examples in clear way (i.e. big fonts, big pictures, etc) so your viewer don't have to buy new 40" monitor plus pair of new eyes. Thank you!
This is cool. I use flexbox in a nocode builder and here is how I tackle this issue. I take the minimum width for the button with longer content at which the content stays linear. Then I set that as the minimum width for both boxes. This makes sure that they stay the same size. The only downside is that they will stack much sooner that if we had the min-width: fit-content.
Once you're facing the solution, the reaction is something like "yes, obviously obvious" but I before never tried to put fit-content to a min-width. Great tip 👏
And now a UX tip: don't add too many inferrable words on your buttons. "Add to" is common to both buttons, and doesn't hint the user of any different behavior, so you can either move that to an outer label, or completely skip that text, as the user can infer that "cart" and "wishlist" buttons on the item mean "add to [...]". That makes your buttons shorter, and easier to find and read (reading left-to-right, you have to read "Add to" before reading the "cart" or "wishlist" that you're more interested in).
that's nonsense sorry. consider the ACA, consider the context. you can't ask users to successfully infer anything. what if i already have this in the cart? does "cart" just show me the cart? UX people like you are what makes the web horrible. please learn your craft before you spew nonsensical advice in comments. 👎👎👎👎👎👎
I've done this before, it works well exactly for this sort of case! I think I ended up using it fairly recently in a flexy table where I wanted some columns such as email address column to basically take up more space if needed to prevent the text wrapping but otherwise should try and make the columns even width or at least take up space based on their content, I think I may have also used a min-width: max-content; at one point.
This is clever. I like it! I feel like every video I watch of yours, Kevin, I learn about new CSS variables that I never knew existed or never thought to use the way you're using. Well done and thank you for sharing!
I honestly love short contents like these. I had this same issue and your solution was straightforward! I don't have time to watch a 30 minute or 12 hour video and then try to find which chapter and minute is the content I'm looking for. Thanks!
Oooooh very helpful! I was fiddling around with the youtube CSS the other day because I really hate how it squashes the channel name of there's a join button on the page, had no idea you can tell it like "wrapping text is a last resort, go through all the other rearrangement options first"
Interesting to see the raw css stuff with flexbox. I started learning HTML 26 years ago, CSS probably been about 20 years and then I never kept up to date or used the newer features like flex and grid etc - by the time I started using those I had switched to tailwind, so I'm used to seeing this type of thing with just a few classes. I must admit if I had to use regular css for flex I wouldn't know what I'm doing. But that fit-content with the width is interesting and will keep it in mind for when it comes in handy one day.
Nice! How glad am I this popped up as a recommended video right now. This solved a similar problem I was having and couldn't quite solve properly. This did exactly what I wanted. Thanks!
Can you do a tutorial on text-wrap: balance; Whether still works well with min-width: fit-content. Also not sure what difference is using stable, pretty, etc. 😅
Hi Kevin! Wouldn't it be better to use grid here instead of flex? To achieve the equal-width columns with the buttons taking the whole cell? I think this way it's much easier that way, are there any caveats to this approach?
Using auto-fill/auto-fit I presume. You'd need to find the right width to move the 2nd button to a new row when the text starts to wrap, and if it's international or using a system font, that's not possible.
This is great! I was scratching my head how to do it nicely. One issue I found when there are multiple button. The gap breaks it and keeps space on the right in the container. How do you deal with that?
@@eioluseyi A mobile is not very wide. Nowrap prevent the text from wrapping even when it's tight. With accessible in mind it's recommended to be able to zoom 200%. So nowrap on mobile is a big risk and should probably always be avoided, on mobile.
@@jenstornell hmm.. this is actually something I haven't really thought about. Thanks for sharing. Now, let me go and revisit all my codebases - CMD + SHIFT + F "no-wrap"
Are there a transparent characters that can be used to make the length of character lines the same or even them out in some approximate way so that when the boxes themselves are resized due to the length of the text within them the transparent characters will equalise everything out? Back in the old tape setting days when things were printed on paper there were even minor adjustments made between the distances of each letter in a word and between words and a sentence that would be used to justify and even out the amount of space for every container in printing.
3:10 to fix that problem, can't we set the min-width to be the width of the content of the larger button? (Hard coding the width in pixels) Great vid as always!
Quick note: I mispoke when I said flex: 1; will make it a flex-shrink: 0. It makes it flex-grow: 1; flex-shrink: 1; and flex-basis: 0; You'd almost never notice the difference as long as the flex-basis is 0, but still, I did make a mistake there, sorry about that!
I usually use white-space: nowrap; in such scenarios. Is there any difference in this scenario between min-width: fit-content or white-space: nowrap?
@@dashx2 I wish I could link replies here, but @jenstornell answered this in a reply on this video
Would setting flex-basis:calc(50% - var(--gap)); fix the small screen being different widths problem without affecting anything else?
Yes I did catch that mistake! But I guess we can let it slide as you showed us such amazing trick. 👌
@@eioluseyi I read his comment. Usually these situtations happen for buttons and most of the time buttons dont have long text taking up more than 100px width so white-space-nowrap rarely is problematic on mobile.
Had the same problem, literally never thought of using fit-content on min/max width.
Same
Yeah, I just rolled with no text break haha
I used it the other day, much simpler. Actually chatgpt suggested it.
I’ve been writing CSS for like 20 years and I feel like I know nothing.
Yeah correct 💯 💯💯 this guy knows everything in CSS
that's because you've been writing CSS since the dawn of time.
I'm constantly aghast at the improvements of the cascade behavior and element addressing. Why people still use SCSS is becoming increasingly questionable.
If you're a skilled front end dev, there really shouldn't need to be a need for any of the frameworks any longer. same for javascript and HTML.
@@1lllllllll1Ease of maintenance is why
@@1lllllllll1well I challenge you to write a frontend framework from scratch then, let's see if it makes sense to use it or not
Bruv 😂
This is brilliant! Coincidentally, I had to make a small change to an older website today. And I noticed they have a similar issue with two buttons, because the client's changed the text on the buttons. It's bothered me for years at this point. I'm applying this there right away!
Neat! You can also achieve the same results by adding "white-space: nowrap" to the buttons as well.
I think this might even kept the widths the same, I didn't test it
@@KlethonioFerreira it unfortunately doesn't because the minimum width of one button is less than the other. Only giving the buttons a fixed minimum width will keep them equal in size.
@@Sagan1995 It's a bit overkill, but I think with a CSS grid instead of flexbox, it's possible to keep them the same size and make them properly wrap.
@@Pixelarter I am imagining you can only achieve that in grid by providing a fixed minimum width, which can also be done in flexbox. So unless I'm wrong and there's another way to do it in grid, I am not seeing the advantage.
@@Sagan1995 You are right. I thought maybe it was possible to do something like _grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr)),_ and get them to always be the same size when squished.
But it's not possible to use _min-content_ in this case, it only accepts an explicit value.
You just saved developers so much time with your solution to this common issue!
The best css channel on TH-cam and it’s not even close. Been watching for years Thank you!!!
The "min-width: fit-content;" declaration helped me out on a project, really cool tip when working with the flex layout! Thanks! 🙌🏼
I love that this solution does not need media queries! Great video as always
That's the stuff! A simple, elegant solution to a common problem. Love it!
thanks - after 40 years dev avoiding CSS, loving finally embracing it, you have added some cool stuff to my toolbox. thanks again.
I fixed this with white-space: preline; but wasnt a fan how it ended in the end. This solution seems much better. Preline would just force the text not to break, but also had to add prettier ignore so it doesnt break the line. Takes a bit more setup. Thanks a lot Kevin for this solution, much appreciated :D
I used this exact trick on this exact iCodeThis challenge! Love it!
Glad to see you in the comments section also! 🤩
Bloody hell that's a nice solution. I was literally working on the same problem last night. But this blows my solution out of the water. Gonna use this right away.
Thanks.
I love this format, short gem, one subject, great for archiving for reminding yourself later. Btw. thank you VERY MUCH for being consistent I don't even remember for how long and presenting code and examples in clear way (i.e. big fonts, big pictures, etc) so your viewer don't have to buy new 40" monitor plus pair of new eyes. Thank you!
This is cool. I use flexbox in a nocode builder and here is how I tackle this issue. I take the minimum width for the button with longer content at which the content stays linear. Then I set that as the minimum width for both boxes. This makes sure that they stay the same size. The only downside is that they will stack much sooner that if we had the min-width: fit-content.
Great sir! I had this issue some days ago and I just remove the space itself by adding - and got it solved
Watched this a couple week ago, came in handy today! Thanks Kevin!
I’m just grateful when the text isn’t trunc…
Funnily enough, I came to the exact same solution about a week ago on a bit intricate flex layout. Good tip!
Once you're facing the solution, the reaction is something like "yes, obviously obvious" but I before never tried to put fit-content to a min-width.
Great tip 👏
I appreciate you spelling out the whole thought process. I feel like it’ll really help improve my intuition for solving css issues in general.
I have had this issue for so long and never knew how to fix them.
*Thank you so much, Kevin!*
New lesson for today! Thanks Kevin! 🤩
And now a UX tip: don't add too many inferrable words on your buttons. "Add to" is common to both buttons, and doesn't hint the user of any different behavior, so you can either move that to an outer label, or completely skip that text, as the user can infer that "cart" and "wishlist" buttons on the item mean "add to [...]". That makes your buttons shorter, and easier to find and read (reading left-to-right, you have to read "Add to" before reading the "cart" or "wishlist" that you're more interested in).
that's nonsense sorry. consider the ACA, consider the context. you can't ask users to successfully infer anything. what if i already have this in the cart? does "cart" just show me the cart?
UX people like you are what makes the web horrible. please learn your craft before you spew nonsensical advice in comments. 👎👎👎👎👎👎
Someone mentioned you in different video and I'm so happy I discovered your channel. Useful stuff.
Your timing is insane i was literally just struggling with this on a landing page yesterday. The Goat
I knew this one!
Also make sure to add text ellipsis in case text is little longer than available width.
thanks kevin i faced the same issue ,text wrap not satisfied me also . Awsome solution😍
Thanks for the reminder! Keep forgetting this exists but we kept relying on flex-direction in media queries.
Had no idea about min-width: fit-content. Love it!
The amount times I encountered this problem. Thanks!
never thought about this could be a workaround. great solution!
I've done this before, it works well exactly for this sort of case! I think I ended up using it fairly recently in a flexy table where I wanted some columns such as email address column to basically take up more space if needed to prevent the text wrapping but otherwise should try and make the columns even width or at least take up space based on their content, I think I may have also used a min-width: max-content; at one point.
You know, i never thought of using fit-content this way. Thanks!
Crazy I was literally dealing with this issue the same day you posted this video
This is clever. I like it! I feel like every video I watch of yours, Kevin, I learn about new CSS variables that I never knew existed or never thought to use the way you're using. Well done and thank you for sharing!
I honestly love short contents like these. I had this same issue and your solution was straightforward! I don't have time to watch a 30 minute or 12 hour video and then try to find which chapter and minute is the content I'm looking for. Thanks!
That's great. Very succinct without skipping the details
I needed to do that for a two column layout, and keep content centered, I also found it worked using flex and min-with as fit-content
to fix the "downside" we could make it so that the texts take the same size by adding a fixed margin. really cool as always
It's a nice way to solve it. I've been using this trick for a while now, and it works on most cases!
Oooo fit-content. This is perfect. Run into this issue all the time ❤
0:46 Thanks sooo much for explaining. I finally understand XD
this is so beautiful, thank you Kevin!!!
Oooooh very helpful! I was fiddling around with the youtube CSS the other day because I really hate how it squashes the channel name of there's a join button on the page, had no idea you can tell it like "wrapping text is a last resort, go through all the other rearrangement options first"
Nice! Definitely better than a fixed min-width which is what I would normally do to solve this, but that can just get messy, this is cool 👍
El mejor trucazo de CSS, gracias
Thank you very much! This one should be taught in all CSS classes >:o
This came in big time! I'm currently working on something similar! Thanks Kevin!
That's genius! Thanks for this
I didn't knew you could use fit-content in a width propperty, that's some real usefull thing
Very precious video
Loved the breakdown. Thank you for the explanation.
In Tailwind it's "min-w-fit". Super handy!
Amazing! Thank you so much for this tip!
Interesting to see the raw css stuff with flexbox. I started learning HTML 26 years ago, CSS probably been about 20 years and then I never kept up to date or used the newer features like flex and grid etc - by the time I started using those I had switched to tailwind, so I'm used to seeing this type of thing with just a few classes. I must admit if I had to use regular css for flex I wouldn't know what I'm doing. But that fit-content with the width is interesting and will keep it in mind for when it comes in handy one day.
Love these videos, tackling the real issues!
Nice! How glad am I this popped up as a recommended video right now. This solved a similar problem I was having and couldn't quite solve properly. This did exactly what I wanted. Thanks!
I’m so excited for this. Had the exact same issue on this exact icodethis challenge !
Miss!! 🫡
@@FlorinPop Pop!!!! Our guy!
This can spare a lot of headaches.
Simply awesome trick, you are the best
Amazing out the box tutorial ❤❤
I love these short videos
Whooo 🎉 thank you for sharing ❤
So let me just say " I LOVE YOUR INTELIGENCE"
Omg super thank you 😭
Brilliant! Loved the solution. Going to try this!
It's kinda funny how exciting did I find this haha
Your saving my life there. Thank you
Wow i guess im good at css , i figured this out when i heard your problem 😅
Aaaahhhggghhhh!!! I wish I knew this 2 months ago!
Thanks Kevin
Beautiful!
Thank you!
Thanks. This is really cool!
this was super cool!
Awesome! Thanks for doing our life easier :)))
This is beyond cool. Thanks a lot!
Thanks Kevin. Great Tip
Bro! Instant subscribed.
Can you do a tutorial on
text-wrap: balance;
Whether still works well with min-width: fit-content.
Also not sure what difference is using stable, pretty, etc. 😅
woaow super useful, thank you
i think you save a lot of us a lot but we just don't find your videos sooner 😂 😂
Hi Kevin!
Wouldn't it be better to use grid here instead of flex?
To achieve the equal-width columns with the buttons taking the whole cell?
I think this way it's much easier that way, are there any caveats to this approach?
Using auto-fill/auto-fit I presume. You'd need to find the right width to move the 2nd button to a new row when the text starts to wrap, and if it's international or using a system font, that's not possible.
This is great! I was scratching my head how to do it nicely. One issue I found when there are multiple button. The gap breaks it and keeps space on the right in the container. How do you deal with that?
How do you feel about a more adaptive approach where you reduce the label to it's icon in small view ports?
Really nice! I usually solve it with white-space: nowrap but that require a different solution on mobile.
I'm curious about the different solution for mobile; what it is and why it's needed?
@@eioluseyi A mobile is not very wide. Nowrap prevent the text from wrapping even when it's tight. With accessible in mind it's recommended to be able to zoom 200%. So nowrap on mobile is a big risk and should probably always be avoided, on mobile.
@@jenstornell hmm.. this is actually something I haven't really thought about.
Thanks for sharing.
Now, let me go and revisit all my codebases - CMD + SHIFT + F "no-wrap"
@@eioluseyi * "nowrap" 😉
fit-content.. what a lovely solution to min-width!
Thought that I'd use experimental @ container to do such dynamic effect, didn't knew that flexbox can do so!
Wow I learned a new thing Kevin
Great!!! Good explanation.
this is great solution, thx for sharing
great stuff!
Pretty cool! I've been using fit-content a lot lately for height specially.
Really good.
Great video! great tip as well!
Are there a transparent characters that can be used to make the length of character lines the same or even them out in some approximate way so that when the boxes themselves are resized due to the length of the text within them the transparent characters will equalise everything out? Back in the old tape setting days when things were printed on paper there were even minor adjustments made between the distances of each letter in a word and between words and a sentence that would be used to justify and even out the amount of space for every container in printing.
3:10 to fix that problem, can't we set the min-width to be the width of the content of the larger button? (Hard coding the width in pixels)
Great vid as always!
Very cool!