如何让Tailwind待办应用网格容器内的任务列表可滚动

问题核心是任务列表所在容器未设置溢出限制，内容撑大后会挤压下方模态框区域。以下是具体修复步骤：

• 给任务列表容器添加滚动属性：在包裹任务项的容器上，添加overflow-y-auto开启垂直滚动，同时设置h-full让它占满所在网格行的全部空间。当任务数量超过容器高度时，会自动出现滚动条，不会撑大容器。
• 调整网格布局的行分配：确保父网格容器使用grid-rows-[1fr_auto]，让任务列表所在的第一行占满屏幕剩余空间，底部模态框所在的第二行仅占用自身所需高度，避免被挤压。

具体代码修改示例 #

假设原任务列表容器代码：

<div className="p-4">
  {todos.map((todo) => (
    <div key={todo.id} className="mb-2 p-2 bg-gray-100 rounded">
      {todo.text}
    </div>
  ))}
</div>

修改为：

<div className="p-4 h-full overflow-y-auto">
  {todos.map((todo) => (
    <div key={todo.id} className="mb-2 p-2 bg-gray-100 rounded">
      {todo.text}
    </div>
  ))}
</div>

同时确保父网格容器样式包含：

<div className="grid grid-rows-[1fr_auto] h-screen">
  {/* 任务列表区域 */}
  <div>...</div>
  {/* 底部新建任务模态框区域 */}
  <div className="p-4 border-t">...</div>
</div>

调整后，任务列表会在自身网格行内滚动，底部模态框固定在屏幕底部，不会被任务列表挤走。

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