如何修复 Tailwindcss div 高度溢出父 div

Question

我的卡片元素的固定高度为 h-80（在 Tailwind 中）。通常我用的是格子里的卡片。

现在，我在那张卡片中有一个 div，它比它的父 div 大，但我希望它垂直滚动。现在的问题是，我无法完全向下滚动。最后一行被截断了。

自动溢出，但不能完全滚动：

全高看少了什么内容：

我正在使用 VueJS 作为框架，这是我的 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>

如何在 TailwindCSS 中用内容溢出的 div 填充剩余的 space？

Answer 1

在子div上使用flex-grow属性让它成长。在父 div 和 flex-col 上设置 flex 以保持样式。查找文档 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>

如何修复 Tailwindcss div 高度溢出父 div

How to fix in Tailwindcss div height overflows parent div

html

javascript

vue.js

tailwind-css