Are You Making These CSS Height Mistakes?

Not gonna lie, height in CSS is cursed.

the flex grow trick thoughhhh omggg, you're a legend, I've always found ways around the height but this one never occured to me, big thanks.

you can set height: 100% for body and html, it is widely supported and basically works as a dvh

Thank you so much for clarifying these concepts. This really helps!

That is exactly what I needed to know! Thank you so much:)

Those CSS cheat sheets are really useful, thanks!

Very useful video, thanks Kyle ❤️

Nice trick with the flexbox. Thx Kyle! 👌

dvh was new to me. Thank you very much for this video! You saved me some JS on page sizing!

This pain with heights in CSS is related to how web pages in general are vertical scrolling by default. In any other application UI framework, such as mobile (Native iOS, Android, RN, Flutter, et al), or desktop (like FX, Qt or Swing), the base behaviour takes into account the full viewport as defined by the device (or window dimensions), and scrolling is opt-in on a per element/component/view basis. I ran into this issue whilst building out an Electron application where I wanted to emulate the desktop experience by making the main DIV a viewport height of 100%, and adding in components that had internal scrolling. It was very difficult to define, say, a view that would have scrolling content on a non-scrolling page that would take up the remaining space in its respective column. It was a YUUUGE pain in the arse, and I never did iron out all the CSS bugs. Mind you, I built this using flex box when it was sort of new. I'd imagine if I needed to do something similar in the future, CSS grid would be more helpful in this regard.

Flex-grow is really quite a useful little item but generally not the first thing one thinks of in these situations. Thanks for the tip!

I appreciate you making this video... Thanks

The most helpful video in my css career until now :)

thank you kyle, very useful

Thanks, very userfull hints.

Thanks 😊 bro 🙏, I learned something new today

This is what I often lack. thank you for sharing

This solves my lingering problem. Thanks Kyle

Thanks Kyle! 👍

فعلا انت مبرمج رائع ولا اعرف كيف اشكر جهودك انا حاليا اتعلم من قناتك كل الشكر لك عاشت ايدك يا بطل