I want the popup modal to take full height, but it doesn't when there's some overflow.

The popup is shown once the user clicks a card. Below, there're images of the behaviors if the user clicks a cards when there's no scroll vs when there's scroll.

The parent section is set to relative and the child modal is set to absolute.

I'm using TailwindCSS and VueJS frameworks.

Parent

<section id="dashboard" class="flex flex-col relative w-full h-full">
    <!-- Cards and stuff -->
    <div class="flex flex-col flex-auto w-full min-h-min px-5 py-10">
        ...
    </div>
    <!-- Modal popup -->
    <SummaryPopUp v-if="popup" @popUp="toggle_popup"/>
</section>

Child [Popup]

<div class="absolute flex flex-col w-full h-full justify-center place-items-center bg-gray-400">
    <!-- Close button -->
    <button type="button">
    </button>
</div>

Parent height vs Child modal height

Not scrolled vs Scrolled