Can not scroll menu - content "behind" the menu scrolls

[ahoiroman]

I created a small menu based on tailwindcss. It works fine, but there's one thing: If this menu is shown on mobile devices, the user scrolls the content of the page that is "behind" the menu. So some menu items can not be shown.

I created a codepen to demonstrate this:

https://codepen.io/spqrinc/pen/RwPBBKq

This is how I defined the fixed menu position:

<div class="bg-gray-500 md:flex md:justify-between md:items-center md:px-4 md:py-3  w-full z-50 top-0 fixed">
		<div class="flex items-center justify-between px-4 py-3 md:p-0">
            [...]
        </div>
</div>

I also created a gif to show what I mean - just click the image to start the gif's animation:

I am not sure, why this is happening. I guess I messed something up with the fixed position. So I am very thankful for your help.