Javascript/React: Overflow X Visible, Overflow Y Auto

Issue

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

I have a sticky 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. I've also been working through this tutorial. 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">
    <SidebarItemNew className="relative">      
         <DropdownOptions className="absolute"/>
    </SidebarItemNew>     
</Sidebar>

Any way to get this working for React? Thanks for the help!

Solution

To fix this issue, I used React Portal to break the child element out of into its own DOM node. Then I used React Popper following this tutorial. It works great now!

Answered By - PurplePineapple