I am trying to make the popup modal take up the full height, but it is not happening when there is overflow.
The popup appears when the user clicks on a card. Below are images showing how the behavior differs when clicking a card with and without scroll.
The parent element section has its position set to relative, while the child modal has its position set to absolute.
My project utilizes TailwindCSS and VueJS frameworks.
Parent Element
<section id="dashboard" class="flex flex-col relative w-full h-full">
<!-- Cards and content -->
<div class="flex flex-col flex-auto w-full min-h-min px-5 py-10">
...
</div>
<!-- Modal popup section -->
<SummaryPopUp v-if="popup" @popUp="toggle_popup"/>
</section>
Child Element [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>
Height of Parent Element vs Height of Child Modal
https://i.sstatic.net/BBbf3l.png
https://i.sstatic.net/mYw0il.png