0
445
ViewsHow to fix in Tailwindcss div height overflows parent div
My card element has a fixed height of h-80 (in Tailwind). usually I use the card in a grid.
Now, I have a div inside that card, which is bigger than it's parent div, however I want it to scroll vertically. The problem becomes now, that I can not scroll completly down. The last line is cut off.
Overflow auto, but not completly scrollable:
Full height to see what content is missing:
I am using VueJS as framework, this is my Card component:
<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>
How do I fill the remaining space in a div with overflowing content in TailwindCSS?
·
Juan Pablo Isaza
1 answers
Answer question0
Use the flex-grow property on the sub-div to allow it to grow.
Set flex on the parent div and flex-col to keep the styling.
Find the documentation here
<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>
·
Juan Pablo Isaza
Report
Answer question