unexpected behavior
could someone explain to me why when i add
overflow-x: hidden to the parent, the headers won't be sticky anymore? https://play.tailwindcss.com/CXjWX5tkZbTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
2 Replies
overflow: hidden disables position: sticky in all children, why I do not know.
Maybe you can set your overflow: hidden on another element, or get rid of it.
This article (https://css-tricks.com/dealing-with-overflow-and-position-sticky/) describes you can get around that by setting a height. (change h-[300vh] to h-screen) or set the sticky element outside the one with overflow(-x/y)-hidden.Chris Coyier
CSS-Tricks
Dealing with overflow and position: sticky; | CSS-Tricks
Any overflow value other than visible and no height is the enemy of child elements with position: sticky;. It's like that element is ready to stick when the
thank you so much! ❤️ didn't know about this
overflow: hidden disables position: sticky in all childrenI'll try to remove the overflow: hidden from the parent and see if i can make it to work, if not, I'll play with heights.