Make overflow-x visible on hover while overflow-y is scroll

Viewed 49

I have this issue that I couldn't find a solution for, I want to make a scroll list with overflow-y set to scroll and have overflow-x set to visible on hover.

When I try to do that it doesn't work because the browser cannot have these be different, so setting overflow-x to visible will be changed to auto by the browser.

Is there a workaround for this issue?

I have made a JSFiddle (using tailwind) to show what I'm trying to achieve, basically I want to have the functionality of the column on the right hand side be implemented into the left hand side column.

1 Answers

This behavior is described in the specification:

The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip.

Related