re: A Modern CSS Reset VIEW POST

re: How about adding an overflow-x: hidden to the body?

Not a great idea! This'll kill position: sticky for all the child elements.

The mental leap for that is a tough one for me. Why isn't my position: sticky; working?! Oh, because some parent element has hidden X overflow? 🤯

Yup. I completely forgot about that bugger. Definitely not helpful to be set as a global style in that context.

Apparently if you set the height of the element you're overflow hidden'ing on, sticky will work. So something like:

#container {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh; /* need to set this for child elements to be able to use display:sticky (c.f. https://github.com/w3c/csswg-drafts/issues/865) */
code of conduct - report abuse