min-content, max-content, fit-content - intrinsic sizing with CSS

A look at the min-content, max-content, and fit-content values.

🔗 Links

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[ryangreen]

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!

[rsmpower]

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!

[heberccruz]

My favorite is fit-content, I usually put a max-width: fit-content; to solve the problem of changing after breaking

[atrus]

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!

[zachjensz]

One could say we now have a wide coverage of width values

[DanielLavedoniodeLima_DLL]

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.

[spicario]

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

[SaskiaStuder]

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!!!

[faisal_foyez]

I have learnt a lot about max-content, min-content and fit-content. Thanks Kevin😊.

[SebastianZartner]

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.

[booksall]

Thank you Kevin Powell!! This tutorial was extremely concise and helpful!!!

[broadshare]

Been looking for h-tag width issue for long, thanks kevin

[acidhauss]

I literally just used max-content today! Thought of the idea after learning fit-content a few months back from you its so helpful

[petarkolev]

Amazing!!! This is so so useful to know!!!
Thank you, Kevin ❤️

[JillRhoads]

This video is the holy grail of text widths!

[alejandronieto]

Thank you from Buenos Aires! Very helpful!

[codercow]

I knew of min and max-content. Never knew there was a fit-content as well which seems useful thanks 😊

[draganpetrovic]

The best explanation ever found, thanks!!!

[astrit]

My fav max-content have been using it where possible and I love it.

[baphometgaming]

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.