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

Posted 2023-03-07

【中文标题】如何在 Tailwindcss 中修复 div 高度溢出父 div

【英文标题】：How to fix in Tailwindcss div height overflows parent div

【发布时间】：2021-12-04 01:18:26

【问题描述】：

我的卡片元素的固定高度为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 中的剩余空间？

【问题讨论】：

不是身高问题，因为我的大脑在我发布问题几秒钟后告诉我......查看答案

【参考方案1】：

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