 Hello my friend and friends. The other day on this CSS subreddit I saw this question come up where someone was asking why a child element with a height as a percentage wasn't working when the min height of the parent was set to 100 vh and this got me thinking about all the times I've seen this question come up from people asking me in my dms to on my discord server and just in general it's something that I seem to be answering all the time so I thought why not talk about it in a video since it seems to be so common and then also going forward I don't have to re-explain myself I can just link to this video so it's a little bit selfish but hopefully it helps you out as well so let's dive into this and we're gonna do that by diving into this little demo that I've made right here I have where we have this very sad height as a percentage that is sad because he's not working and so for this one let's let's move on over to here and you can see I well I have my section it has a hero class and then I have my h1 and then let's go over to here and I have a min height of 75 vh and then I have a height of 50 percent that's clearly not working and I'm doing this on an h1 this can be a div or a section or whatever it doesn't matter really what it is it just matters that this is a direct child and it's not working now let's take this and go to height 75 and all of a sudden it does work well why does that work but this doesn't work that's really frustrating right and min height is definitely the safer option if you're going to set a height on something usually I recommend min height but then of course this this sort of breaks and that can be you know why is this happening so the reason this is happening is let's figure out why this is working if I do a height of 75 vh well this height is 50 percent of this number that makes sense right what if I take this off though what if we don't have a height well and you know what let's come in here let's actually take off this dark blue just so we don't even see that and you can see that my hero area is right here and it's it's it has a height to it well let's come in here and actually take this h1 out and there's no content well now there's actually my hero is still there but there's no height to it because there's no content inside of it and let's just come here and grab a couple of paragraphs that I can copy there and paste into here and now we have more height and that's happening because the height of an element is defined by default by the content that's inside of it and that also can be changed based on the screen size which is usually why we want a min height right so if I open my dev tools here in responsive mode uh and just in case you don't know the responsive mode in chrome is this little guy right here and it's pretty easy it's very similar in firefox um as well and as you know as the content has less horizontal space we need more vertical space and everything just adjusts and that's really good and that's one of the reasons we often don't want a height of 75 because if I do a height of 75 at one point I can end up getting overflow so that we fix that by saying a min height and then we know that it's going to work at all the different screen sizes where even as we get to these smaller screen sizes we can see that it's not overflowing my hero is just growing in space but that's the reason that min height is actually a problem we need this height has to be defined and that's the reason everything jumped there when I did the height is just because this is now 50 but this number here is working if this has a set height if the browser knows how big this is then this can work if I do not have a height on something then this h1 is part of what's defining the height of this element but if this is defining the height of this element but this element is then defining this one because this is a percentage that creates a loop right so this is defining the height of this which is defining the height of this which is defining the height of this and it would crash your browser so instead you know browsers are smart and they don't want to crash whenever there's a little bit of bad code so in this case what's happening is the browser is going well 50% of an undefined number is nothing so I'm not going to actually do anything with this because right now I have an undefined height if I have a defined height it can work because this will never change it's always 75 vh the browser can calculate that if I have a min height of 75 vh though that can change right we saw that when I shrunk this down at one point that teal background is growing and shrinking so we have a defined height sometimes which isn't good enough for the height to work here so we cannot have a min height and then a height defined in a percentage there is one exception to this and it's if you bring grid into it but it gets kind of weird and it just introduces a lot of potential for overflow um and it would actually sort of muck things up if I tried doing it right now because with grid this 50% would be based on the cell that it's inside of and no longer based on the parent so if it's the only element anyway it gets kind of weird and I've seen a lot of problems using that as a potential solution to fix this so I'm not even really going to get into it right now but the main thing is if I know this is 75 vh you know we can just do that divide by two so it's what 37.5 vh I can do that math myself so if that's the case and you really need that now of course this isn't a height now maybe you'd even want that to also be a min height just to prevent any issues from coming up so if you have a set number here you could just set a min height on that element or a height on that element taking sort of the percentage that you'd want to take that's sort of the simple fix and in general a lot of the time I feel like we don't really need heights anyway but this is just like if you really need to have it um you could do it that way or if you wanted to you set it all up with custom properties and this could be a calc that's this divided by two I find that's just over complicating things for the most part though but if you really really really need to do it maybe this is the best solution um though I'm not in love with it and I'd probably just try not to have a height defined on whatever it is I'm putting in there and I just use some padding and let things do what they need to do and another thing that I often see people doing actually that's related I guess a little bit with height is with widths and where people are declaring widths like width 100 percent or width 100 vw when it's actually more problematic than a good thing and you know it's just best often there also not to declare a width unless you really need to have one for a very specific reason and if you'd like to know why that is I have a very short video that might be of interest to you that you can see right here and with that I would like to thank my enablers of awesome who are web on demand Andrew Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome