Why does my flexbox shrink beyond its chidren's height?

Why do my flex box's children overflow their parent (hatched part) here

given the following code:

<script>import { SlideToggle } from '@skeletonlabs/skeleton';</script><div class="flex flex-col w-full h-full justify-center"><div class="basis-[5%] shrink-0" /><div class="card p-4 flex flex-col flex-grow w-[30%] self-center"><div class="basis-[5%] shrink-0" /><slot /><div class="basis-[5%] shrink-0" /><div class="grid grid-cols-3 gap-x-2 w-[70%] mt-auto self-center items-center"><span class="justify-self-end">Login</span><SlideToggle                class="justify-self-center"                name="login-or-register"                {checked}            /><span class="justify-self-start">Registrieren</span></div></div><div class="basis-[10%] shrink" /></div>

The <div> with the card class is the flex box in question.

In the same vain, why do the children overflow horizontally (viz. "Benutzername") and why isn't the overflowing area hatched, too?

Thanks!