Quiero que el modal emergente tome la altura completa, pero no lo hace cuando hay un desbordamiento.

La ventana emergente se muestra una vez que el usuario hace clic en una tarjeta. A continuación, hay imágenes de los comportamientos si el usuario hace clic en una tarjeta cuando no hay desplazamiento frente a cuando hay desplazamiento.

La section principal se establece en relativo y el modal secundario se establece en absoluto .

Estoy usando los frameworks TailwindCSS y VueJS.

Padre

 <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>

Niño [Ventana emergente]

 <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>

Altura principal frente a altura modal secundaria

No desplazado vs desplazado