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.