时间戳

首页 > 解决方案 > 如何修复 Tailwindcss div 高度溢出父 div

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

问题描述

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

标签： javascripthtmlvue.jstailwind-css

解决方案

使用flex-growsub-div 上的属性允许它增长。flex在父 div 上设置并flex-col保持样式。在此处查找文档

  <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>

推荐阅读