[Vuejs]-How to fix in Tailwindcss div height overflows parent div

by

0👍

✅

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>

Leave a comment