horizontal scroll of one row of cards,each card has extra content which appears on hover but once you hover over it, that extra content does not push other elements around (scrollbar and rest of the page does not get pushed to the bottom as extra content appears).
Here's an example:https://codepen.io/dimi94/pen/gOyLoWL?editors=1100
Is it possible to achieve this without JS?
Thanks
I've tried using absolute positioning but to no success. Using absolute positioning only makes hoverable element fit within scrollable div forcing appearance of the vertical scroll (not desired). To make matters worse, vertical scroll cannot be removed in this situation due to overflow-x and overflow-y sharing same value (one cannot be visible if the other one is auto/scroll)