使用Tailwind CSS开发Kanban看板时列表溢出无法滚动如何解决？

解决方案 #

核心原因是看板列表容器未设置高度限制，内部条目区域的h-full没有可继承的有效高度，导致溢出时无法触发滚动。按以下要求修改代码即可实现预期效果：

• 给单个看板列表的外层容器新增flex flex-col max-h-full类，限制列表最大高度不超过外层容器，同时开启弹性列布局分配内部高度
• 将列表条目容器的h-full替换为flex-1，让条目区域自动占据列表内除头部、新增按钮外的剩余高度，超出高度时自动触发滚动

修改后的完整代码如下：

<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 flex flex-col max-h-full" 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 flex-1 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>

内容的提问来源于stack exchange，提问作者Xaarth