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 bees now, that I can not scroll pletly down. The last line is cut off.

Overflow auto, but not pletly scrollable:

Full height to see what content is missing:

I am using VueJS as framework, this is my Card ponent:

  <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 ponent which holds the appointments-->
      </slot>
    </div>
  </div>

How do I fill the remaining space in a div with overflowing content in TailwindCSS?

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 bees now, that I can not scroll pletly down. The last line is cut off.

Overflow auto, but not pletly scrollable:

Full height to see what content is missing:

I am using VueJS as framework, this is my Card ponent:

  <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 ponent which holds the appointments-->
      </slot>
    </div>
  </div>

How do I fill the remaining space in a div with overflowing content in TailwindCSS?

• javascript
• html
• vue.js
• tailwind-css

• Not an height issue as my brain told me seconds after I posted the question.... See the answer – Martin Müsli Commented Oct 15, 2021 at 23:13

1 Answer 1

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 ponent which holds the appointments-->
      </slot>
    </div>
  </div>