One of the most common CSS issues people run into

this is not usefull att al, i was soo sure cliking this video, that kevin is gonna blow my mind with an out of the world CSS Trick as usual, but what the hell he just did my removing percentage value in place of a absolute value. what if i really need a percentage like i really need it to be half the size of the parent no matter if parent grows or not

has anyone ever encountered an error (when using framework like next js or sveltekit) that triggers the browser crash "Aw snap! status access violation" ? the error happened right after hovering over certain element that has height set to 100%, the moment i got rid of the height:100, it didn't trigger the error? guys please help, it's been 4 months and i literally have no idea what went wrong, i never encountered this kind of error when using react or vanilla js,

I hate css so much and I'm trying to learn how to live with it through your videos :D this is such pain I hate the person who created this mess......... please someone help

A CSS custom property may be helpful to both maintain the code readable and avoid seemly arbitrary values:

.parent {
—height: 75vh;
min-heigh: var(—height);
}

.child {
height: calc(var(—height) * 0.5);
}

This seems more like an issue caused by the technical implementation of css. In a situation like this the interpretation of min-height should return a static value which the height% could work off.

I understand that is not how it works right now and that is entirely an issue created by developers because of the way the developers programmed browser engines.

You are REEEEEALLY the king of CSS

Hey Kevin. Any tips and tricks on how to make an IFRAME height full height?

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

kevin, where can i ask questions to you ? i mean sometimes after trying everthing i still unable to figure out somethings , even googling does not help , i dont have any teacher and any friend who can teach me , so what to do?

Brilliant explanation Kevin.

Your excellent videos usually deal with a single page but my problem is that I have pages with nested iframes and am struggling to set their height. Also, I usually access these pages from a local directory with no internet connection. If I use java code that accesses the document.documentElement.scrollHeight property then I get: SecurityError: Permission denied to access property "document" on cross-origin object. This is crazy as the file being accessed is in the same local directory as the parent page. I end up having to set the heights manually with something like 7000px which is necessary to stop a second scroll bar on the longer pages but this does not look good on shorter pages. I want to access the “inner” pages without scroll bars so they just flow with the parent but how do you set the height automatically? Thanks for your great work!

This would be easier to visualize if you didn't leave the darkblue commented out

How about giving the h1 a min-height of 50%

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

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) 😜

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

Actually I'm pretty sure all you had to do was set height = 0px, the min would then take effect and the child css would work.

it was totally sh*it buddy.. worst ..

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

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

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

Web dev is the only desktop application development that is still actively developed, truly cross-platform and doesnt get killed every 2 weeks (looks at Microsoft)

Are there any CSS linters or tools that can spot these sorts of issues?

Thanks for the video. It made me think of another css height related question. What's the deal with setting the html and body elements to 100% that I see as a part of a lot of default css stylesheets? I have never used that, and I am wondering if I should be.

I had that issue yesterday

You make CSS simple

Is calc(inherit/2) possible ?

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?

Gotta love browser logic. It saves us (and our users) from ourselves.

Do we have to be good at HTML and CSS if we can use Anima to turn figma designs to code with magic?

And another issue with 100vh is it's not working on mobile browsers. 🥲

Wait did you switch to Chrome?!

The solution is not to make it this way. Use Grid or Flex and you are good to go. IMO this is the wrong approach. I get why beginner think that way.

If only the browser actually gave a debug warning about this, so you can learn it during development

On parent, do {
Height: 1px;
Min-height: 75vh; }

Then child works with percentage from bigger min-height. Dont know mechanics and browser support 🤷

CSS is so powerful 💪💪

Make a demo on IFRAME responsive css. Like to embed a webpage

min-height + height works with position: absolute for children. Sometimes this is useful

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

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

Question:
Would it work, if the parent element (with the min-height: 75vh) would also have a set height (height: 1px;)?
Or is it just plain stupid? 😅

Hey kevin, do you think you could a video about intentionally overflowing things?

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

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

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.

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

One of the biggest problems I always face when building for mobile is the menu height always tries to “catch up” to the device screen height. Especially when I build menu screens with 100% height, but I’ve also tried min height 100%.

That said, if I scroll up or down the height is always re-calculated causing constant unwanted shifting of content on the menu. And I can’t solve this problem.