Absolute Element inside Relative Overflows From Container

Question

I have a situation where I have an absolute element placed inside a relative element. Everything works fine when the overflow property is not set. But if I set overflow to auto, the absolute element adds scroll which I don't want.

here is the code and you can test this snippet for more information.

<div class="flex h-screen flex-col items-center justify-center bg-blue-200">
  <div class="group relative mx-auto flex w-96 h-20 flex-col items-center justify-center overflow-y-auto bg-white p-20">
    <p>Hover over this element</p>
    <div>
       <span class="absolute -right-5 -top-5 hidden rounded-full bg-blue-500 px-4 py-2 text-sm text-white group-hover:inline-block"> Button </span>
    </div>
  </div>
</div>