顺风CSS -创建看板

Question

我正在尝试创建一个带有顺风css的看板。但是当列表中有很多项时，我会遇到一个问题。

列表的高度增加了，我无法滚动。因为我已经将overflow-y-hidden添加到容器中。

列表的最大高度不应该大于容器的高度，如果有更多的项，我希望显示滚动条。

我如何才能做到这一点？

​

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div
  class="absolute top-0 bottom-0 left-0 right-0 flex items-start pb-16 overflow-x-auto overflow-y-hidden select-none "
>
  <!-- List Start -->
  <div class="mx-1 bg-white border rounded-lg" style="min-width: 260px">
    <!-- Header Start -->
    <div class="flex items-center px-4 py-3 space-x-2 border-b">
      <h2 class="text-sm font-medium uppercase">Approved</h2>
    </div>
    <!-- Header End -->

    <!-- Items Start -->
    <div
      class="relative flex flex-col h-full px-4 py-4 space-y-3 overflow-auto bg-white "
      style="background: white none repeat scroll 0% 0%"
    >
      <div
        class="flex items-center w-full px-1 text-sm border rounded-lg shadow-sm cursor-pointer select-none  group"
        style="background: white none repeat scroll 0% 0%"
      >
        <button type="button" class="inline-block w-full py-2 text-left">
          Create email templates for BPM
        </button>
      </div>
    </div>
    <!-- Items End -->

    <!-- Add New Start -->
    <div class="flex items-center px-4 pb-4">
      <button
        type="button"
        class="flex items-center px-2 py-1 space-x-2 text-gray-700 rounded-md  hover:bg-gray-100"
      >
        <span>Add New</span>
      </button>
    </div>
    <!-- Add New End -->
  </div>
  <!-- List End -->
</div>

​

Answer 1

来自顺风文档的

使用overflow-auto可以在元素的内容溢出该元素的边界时向该元素添加滚动条。与.overflow-scroll不同，.overflow-scroll总是显示滚动条，该实用程序仅在需要滚动时才会显示滚动条。

<div class="overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>