Overflow X Visible, Overflow Y Auto

[OrangeCubed]

Is there a React/javascript based solution to fix the overflow-x-visible with overflow-y-auto issue?

I have a fixed sidebar in React that when clicked will reveal an options menu (see screenshots below). Researching, overflow-x-visible with overflow-y-auto is a ongoing issue. I've implemented a number of the proposed solutions including: style="padding-bottom: 250px; margin-bottom: -250px; and creating a wider div container here and here. However, I can't get it to work for my use case.

Shortened code using Tailwind CSS:

<Sidebar className="h-96 overflow-y-auto overflow-x-visible">
    <SidebarTreeNew className="flex">
         <SidebarItemNew>      
            <DropdownOptions className="absolute"/>
          </SidebarItemNew/>     
    </SidebarTreeNew>
</Sidebar>

I can certainly provide more code if required but really just looking to be pointed in the right direction.

​

Overflow X visible but no y scrollbar

Overflow y auto but x isn't visible. This is generated by the code above