min-content, max-content, fit-content - intrinsic sizing with CSS
Вставка
- Опубліковано 25 чер 2024
- A look at the min-content, max-content, and fit-content values.
🔗 Links
✅ Building the layout: • Learn how to create a ...
✅ width auto vs 100%: • CSS width auto vs 100%...
✅ MDN on intrinsic sizing in CSS: developer.mozilla.org/en-US/d...
⌚ Timestamps
00:00 - Introduction
01:19 - Understanding the default behaviour
03:41 - max-content
05:24 - min-content
06:44 - fit-content
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UA-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Kevin’s ability to teach concepts like CSS(coding) to an audience of unknown magnitude and absolutely excel at making it feel more understandable is mind blowing. Thank you!
One could say we now have a wide coverage of width values
Yes. The breadth of this episode was expansive. 110vw in fact.
there's no min to the content kevin will teach us.
@@easternadventures9978 all three of you shut up, i will clamp your asses
*Assets, meant graphical assets
My favorite is fit-content, I usually put a max-width: fit-content; to solve the problem of changing after breaking
My favourite is chrome dev tools🐱
I just try all of them until they fit my content
I saw this thing like 1 day before I saw it on your channel but, man, Kevin, you really make me love CSS more and more. Even thought I'm on my path on self-taught web development and I'm just learning CSS, they way you explain it every single time amazes me. I'll be forever in your debts. Keep up the not good but the amazing work you do!
As always, fantastic video! Your examples and explanations always make it easy to understand what a specific CSS feature is doing and why you'd want to use it.
I made my first website in 1996 for a Quake clan I made with some friends in junior high. Back then, text was manipulated with the now defunct font tag, and anything layout related was mostly done with images and the background attribute. I was first introduced to CSS in the early 2000s when customizing my MySpace page. I didn't know it was CSS at the time. I started learning CSS in earnest in 2009, when Flash (I was a Flash developer) started to go belly-up. I consider myself a pretty advanced CSS user, but I don't really have time to keep up with all the changes since I went back to University and had 2 kids. This channel has been a really awesome way to just get little snippets of the most useful stuff to keep me in the loop. Thanks Kevin!
I remember those old days well! Glad I've helped you catch up, it's come a long way, lol
@@KevinPowell have you done any retrospectives on CSS/HTML through the years behind the one about the progression from floats->flex->grid?
I'd be really interested to hear about what it was like to style a site before all the new markup features we have now.
@@dormiebasne3578 That would be interesting! I still have nightmares about the dreaded clearfix!
Unrelated question from a fellow Quake 1 player: What clan? :)
@@rolandking507 I can't even remember. It was not a successful one 🤣
I found the tutorial interesting, but right in the end you showed the clamp function and that was EXACTLY what I was looking for on my personal website, but didn't know existed. Thanks Kevin! You're awesome! As a Data Engineer/Backend Python Developer, I always learn new things with your videos.
You have no idea how much your videos mean to me. I have learned so so so much. Thank you for information that you share!!!
Amazing!!! This is so so useful to know!!!
Thank you, Kevin ❤️
Thank You for your work Kevin! If you ever have time for something like that, i definitely would love to see more projects, big or small, that show how You work, all your mistakes and thought process so we can keep getting better at frontend and see how a project is built in real world.
fr you just made me fall in love with css bc i strugle with it a lot and dont understent some things but you explain it soo goood and easy. This is the first time I fully understand width auto. you just made my day
I literally just used max-content today! Thought of the idea after learning fit-content a few months back from you its so helpful
KEVIN, this is exactly what I needed!!!!! Thank you!!!!!
I have learnt a lot about max-content, min-content and fit-content. Thanks Kevin😊.
Thank you Kevin Powell!! This tutorial was extremely concise and helpful!!!
Awesome tip and so very well presented. Thank you for sharing your knowledge. Great job Kevin.
Been looking for h-tag width issue for long, thanks kevin
Loving your content Kevin. Gets me pumped to get on the computer and make something
Thank you from Buenos Aires! Very helpful!
The best explanation ever found, thanks!!!
I knew of min and max-content. Never knew there was a fit-content as well which seems useful thanks 😊
Great Video❤
My fav max-content have been using it where possible and I love it.
Because people do not talk much about these values, I thought it was not good practice to use them.
Let's start using them more often!
Great video as always!
Very useful.Thank you.
As usual it is perfect
You always tell cool tricks, cool
Thank you keiv I didn't understand them well, Now I do 😊
This really _widened_ my css knowledge :)
Thanks kevin!
Nice video its really helps me lot.
You are awsome, thank you very much!!
Kevin... are you a psychic by chance? I just completed the NFT challenge on Frontend Mentor and the heading was bugging me because the hover effect would activate even when I wasn't hovering directly on it... I wasn't looking to fix it, to be honest. Was just gonna live with it... out of the blue I see this. Bam. Issue solved. Thank you. You always seem to have exactly what I need when I need it.
This video is the holy grail of text widths!
Thanks!
Kevin - You explain everything so well!! Thank you. Hopefully, I will have money one day to buy a shirt and send money. Thank you once again.
Woooooow 🔥🔥
Live your videos ❤️
Thank you :)
Kevin your the best been learning from you for years now and purchased classes from you and will do more give me a deal!
Yep I love max, min .. got to know about fit today
I found this information fitting.
CSS guru!
Love the shirt!
amazing
fit-content is AWESOME!!!
Thank's Alot
Hi, I love your tutorial, I learn a lot from them, but I really love to see you make a css modification to existing website and how to deal with it. Thanks 👍.
Good video
max-content has workaround with display: inline-block and whitespace: nowrap, but min-content is INTERESTING!
maybe a viodeo about animations? I know that you'll explain it in the best way possible :D great channel!!! keep the work goin!
Thank you very much for the helpful and meaningful contents
Great video as always! You used the clamp function for the font-size based on the vw; is there a similar solution to make the font-size responsive using the parent's size instead of the viewport?
Not yet, but it's in the works!
In the meantime there is typetura (I have a video on that coming out in a week or 2)
@@KevinPowell ok got you on bell, looking forward to that soon. Thanks for your great content as always
Great explanation Kevin. I would like to know how to have a background on that title that only goes as far as each line's content... So that when ir wraps the background of "our" doesnt go all the way to "projects"
Wrap contents into span and add background on it. But making a rectangular background is impossible, unfortunately...
Oh, magic with CSS
The “fit-content” value is basically a simpler version of: min(max-content, 100%)
I've heard you often say, "My students do this, etc.." Do you mean your students in scrumba or something else? Because I want to be one of them
Scrimba, and a couple of his bits there are free, plus also his conquering responsive layout course is free,
I used to teach at at a school for ~5 years
Would there be many use cases you'd reach for max-content over fit-content then? Seems like it covers a lot more!
Love your videos Kevin, but afterwards I desperately wish they where also transcribed / a condensed blog article for quick reference when I’m at my laptop. (If your curious what I mean, see Hacking With Swift Plus, articles are available as video and then transcribed as a blog with code / images)
I'm going to be making an effort to turn more of my video content into written content this year! It's in the plans... Just have to get a free things in place first 🙂
@@KevinPowell yay! honestly if I can help in some way I’d love to.
fit-content is godsend tbh.
Hi Kevin, you did 5vw + 1 rem while setting clamp values. I am wondering how you decided that 5vw + 1 rem should be good enough. Is there any video of yours that you can point me to learn to estimate this calculation? Thanks in advance :)
lol turns out Kevin has already done this :
ua-cam.com/video/U9VF-4euyRo/v-deo.html
How are you multiline commenting in vscode? DFTBA and again great video!
You can place your cursor in multiple places with alt + clicking
have you tried the clap() with min- max- fit-content as its params?
Is there any way to make it shrink to the longest line each time it wraps?
Do you have a video on clamp. This was the first time I saw it being used and it looked great.
ua-cam.com/video/U9VF-4euyRo/v-deo.html
@@siddiqahmed3274 Thanks mate
hi kevin. i always get confused with this optimal value in clamp what is this 5vw+1rem, cam you explain that one pleeeeeeeease. thank you
When i tried this on an element, it worked but the element was pushed to the left of the screen when it was in the center how i wanted it. A little help would be much appreciated, please.
For max-content, I think a inline-block will be better?
Hiii I tried the aspect ratio for image tag but it doesn’t work in safari .
How can I learn more about responsive font without using media query? How did you do in the video?
What is that clamp()? Please gimme the link for the video because I am too lazy to find it 😂
I'm surprised there isn't a quick way to set a background per word yet. It looks rather unflattering when the background is always aligned to the longest word and surrounds all other, shorter words.
I had problems with browser supoort on max-content. Make sure you add supoort for all engines.
Is the fit content depreciated? I think it works on Chrome, but we get an warning on Firefox.
So max-content is like changing the display property to inline-block ?
Can you please make a video on Houdini
👍
How is fit-content different from display inline-block?
Ok Kevin perhaps a topic for a 'short' - who knows but... I keep getting an issue with the top bar + menu area when displaying a full screen image that has "min-height: 100vh;" - so how do we display the image full screen taking into account the very top bar (normally tel, social icons, etc.) Plus menu and logo? Tried everything. Perhaps the answer is dead simple - PLEASE??? 🤔 I ALWAYS get the image going down more than the screen height...
🙋♂
The best way is probably too use JS to get the height of those other elements, then use a calc() and subtract that value from 100vh. Sounds more complicated written here than or actually is 😅
@@KevinPowell Can you point to any good examples (that are simple...) ?
When using clamp, why is your middle value a vw + rem as opposed to just a vw?
lol turns out Kevin has already done this :
ua-cam.com/video/U9VF-4euyRo/v-deo.html
THANK YOU!
Sir Kevin, can you please do a video where you explain how you determine the necessary values when using clamp. in your example this video you typed in 2rem, 5vw,+1rem, 5rem.... How did you know to use those values?? I've tried clamp and can never get it to work.
Keep trying numbers until it works? 🤣🤣
Utopia.fyi has a nice font-scale generator that uses clamp() as well.
Can css function clamp() use the min-content, max-content, fit-content?
Good question, but I don't think so. Pretty sure it needs fixed values, but I could be wrong. Worth testing out!
Thanks a lot for this!! But what abour clam() ;)
Hmmm, what happen if you set the width to max-content, and set the max-width to 100% ?
Was looking for this comment :) probably would work perfectly as expected
i had no idea clamp existed
What about cross-browser compatibility?
All of them works on all modern browsers
The main problem with it that when fit-content wraps text, it behaves the same way as auto does. It would be very cool if it could've shink after wrap, but seems like it's impossible in css :(
Yup, that's just not how it works, since everything is a box 😕. Though that did make me think of something that *might* work, but I'm on mobile so I can't test it right now. If it does, I'll make a video on it 👍
You wrap the text in a span (I'm not sure if setting display:inline on heading will work) and then use box-decoration-break:clone
#Kevin
I use fit-content almost every day lol
Wouldn't setting display:inline achieve the same thing as fit-content, at least for a heading or paragraph?
Not without all of the other side-effects of losing 'display:block'.
As Killyspudful said, that has other side effects as well, like no margin top and bottom, padding potentially overlapping items, and if you have more than one, one after each other, then they'd go next to one another
max-width: min(max-content, auto)
@media ....?
Why fit-content is not a default behaviour ? Auto width isn't really intuitive...
Auto with is much more useful for layouts though!
max,min, fit content are useless. Just use display: inline-block, you dont need any things to do
I found the tutorial interesting, but right in the end you showed the clamp function and that was EXACTLY what I was looking for on my personal website, but didn't know existed. Thanks Kevin! You're awesome! As a Data Engineer/Backend Python Developer, I always learn new things with your videos.
Ok, I have your CV now, i will email you for a job offer