Scrollable wrapper cuts out absolute elements

Issue

I came across a problem of cutting off absolute child of relative child of a scrollable list.

My problem: https://youtu.be/uz5wmLEM04A
Live prototype: https://jsfiddle.net/n0dowLhz/
My code (REACT): https://github.com/MoDrazzz/teamguru/blob/team-page/src/components/Teams/TeamMembers.tsx#L30-L34

The problem was also described here. With walkaround they have implemented, when menu is active, after scroll it stays in the same position.

The solution would be to make the menu visible no matter overflow is set to auto.

<!-- Has overflow: auto; --->
<ul>
  <li>
    <p>Some content</p>
     <!-- Must be relative --->
    <div>
      <button>Menu toggler</button>
      <!-- Absolute --->
      <div>Menu</div>
    </div>
  </li>
</ul>

Solution

The reason why the popup element is being cut is because overflow is hidden. The way to fix that is by taking the popup element outside the container (maybe somewhere in the body element) and position it on the menu on click.

EDIT

Important thing is to disabled any page/container scroll when the popup menu is shown and enable scroll when popup is hidden

Answered By - iamalinski