0
451
ViewsCómo corregir en Tailwindcss div height overflows parent div
El elemento de mi tarjeta tiene una altura fija de h-80 (en Tailwind). Usualmente uso la tarjeta en una cuadrícula.
Ahora, tengo un div dentro de esa tarjeta, que es más grande que su div principal, sin embargo, quiero que se desplace verticalmente. El problema ahora es que no puedo desplazarme completamente hacia abajo. La última línea está cortada.
Desbordamiento automático, pero no completamente desplazable: 
Altura completa para ver qué contenido falta: 
Estoy usando VueJS como marco, este es mi componente Card:
<div class="w-full overflow-hidden h-full px-3 py-2"> <div v-if="title" class="block text-gray-700 text-lg font-semibold py-2 px-2"> <i :class="title_icon" /> {{ title }} </div> <div class="h-full overflow-y-auto"> <slot> <-- Here is another component which holds the appointments--> </slot> </div> </div>¿Cómo completo el espacio restante en un div con contenido desbordado en TailwindCSS?
1 answers
Answer question0
Use la propiedad flex-grow en el subdiv para permitir que crezca. Configure flex en el div principal y flex-col para mantener el estilo. Encuentre la documentación aquí
<div class="flex flex-col w-full overflow-hidden h-full px-3 py-2"> <div v-if="title" class="block text-gray-700 text-lg font-semibold py-2 px-2"> <i :class="title_icon" /> {{ title }} </div> <div class="flex-grow h-full overflow-y-auto"> <slot> <-- Here is another component which holds the appointments--> </slot> </div> </div>