One of the most common CSS issues people run into

When we declare the height of an element as a percentage it has to be based on the height of the parent element. A lot of people know that, but then get frustrated when they declare a min-height and it doesn't work. In fact, it's probably one of the most common questions I see, so in this video I take a look at why it doesn't work.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:35 - Why it works with a height, but not a min-height
04:15 - A potential solution if you really need to do this

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

[KenBanksPEng]

CSS brings an inseparable mixture of agonizing pain and wonderful pleasure. Height is in the pain part.

[gE]

I just realised that you are saying "Hello my front-end friends" and not "Hello my friend and friends" XD

[_surreal]

css is the one thing that brings my work to a screeching halt every single time.

[clevermissfox]

I so look forward to new KP vids!! Always valuable and important information!!

Would love to get some confirmation on how box-sizing: border-box works on flex items. I keep finding conflicting info when trying to research.

[VeitLehmann]

Thanks a lot for education like this! I'm constantly removing width: 100% or 100vw and defined heights from our projects.

[HeyJes]

Great video Kevin! I love CSS but height is definitely one of the things that can drive me insane, haha.

You can use grid on the hero element if you want both (min-height and % height), though. Like .hero { min-height: 75vh; display: grid; grid-template-rows: 1fr 1fr; } and HTML be like <section

[aviralvikram]

Kevin you should know that you are great at making people "fall in love with css".
Take me for example I was a student when I started watching your videos, and now I am a junior dev who is somewhat better with html and css than my seniors with 2yoe.

[vyldim]

4:17 "it gets kind of weird" - CSS in 5 words.

[thecodecatalyst]

Thanks for the great explanation. For me it makes a lot of sense thinking about height being an static measure and min-height a promised so you can't calculate the percentage of a number you don't know up-front.

[mohitashliya]

This was the problem for me for a long time thanks a lot.

[esh]

Great Videos Kevin.. Thanks for the clarification.. I mostly work with maps mostly leaflet where i have to specify a height say 90 or 100vh.. If i use a min-height it doesn’t work. Its weird. Would be great if you can do a video on maps and how to use css on any map library like leaflet( which is open source) 😜

[Akimb]

Hey, Kevin. Would be interesting if you did a video on replaced elements. Both MDN and the CSS spec is a bit abstract on the topic, but maybe you could share your insights

[eqprog]

Maybe CSS should update their standards to basically allow minimum height to affect % height so that way the browser developers will eventually include it. It seems like a pretty simple algorithm to me. If no height is defined and min height is defined, then height = min height OR current height. Then the child height % would have a value to work off of. There should be ways to do this without an endless loop occurring.

I don't know if thats the best solution... But this problem still is one of the least intuitive aspects of CSS and should be 'solved'. There are plenty of other css values that can get calculated real-time so why can't this? Boo

[sorcerer]

Hey Kevin I'm coming from your css demystified course it's so much hilarious that you didn't know the plural of flex basis is basises or basies 🤣🤣

[Accounts]

2:14 CTRL Shift M on Firefox opens it. Also works on chrome but you need the Inspect Element window already open.

[ChamplooMusashi]

Are there tools for static analysis of a page at runtime for situations like you described where styles are implicitly ignored? Like generating a report of classes that tried to apply some style but it was invalid and the nodes responsible for causing it?

[tmbarral]

Oh ! The loop that lead to a crash ! Brilliant! That’s obvious ! But I didn’t see that. Muchos kudos for the enlightenment Kev ;)

[hikari]

omg, I remember this early in my training... block elements always made me feel like a block head

[alexm]

So we can use:

body {
--height: 75vh;
min-height: var(--height);
}

h1 {
min-height: calc(var(--height)/2);
}

And this "height: calc(var(--height)/2)" logically should be equal to 50% of the body height, but without custom properties it's not for some reason...