React-Tailwind CSS待办列表溢出容器而非滚动的问题排查

问题描述 #

使用React和Tailwind CSS构建简易待办列表时，添加多个任务后列表会超出卡片容器范围，无法在容器内生成滚动条。

原组件代码 #

Card组件 #

"use client";
import React, { useState } from "react";
import List from "./List";

interface Task {
  name: string;
  status?: boolean;
}

const Card = () => {
  const [todos, setTodos] = useState<Task[]>([]);
  const [taskName, setTaskName] = useState<string>("");

  const addTask = () => {
    if (!taskName.trim()) return; // Prevent empty tasks
    setTodos([...todos, { name: taskName, status: false }]);
    setTaskName(""); // Reset input field after adding
  };

  const onDelete = (name: string) => {
    setTodos(todos.filter((todo) => todo.name !== name));
  };

  const onChecked = (name: string) => {
    setTodos(
      todos.map((todo) =>
        todo.name === name ? { ...todo, status: !todo.status } : todo
      )
    );
  };

  return (
    <div className="py-5 px-7 pb-5 shadow-xl w-max flex flex-col justify-center items-center rounded-lg bg-white h-[75%]">
      <h1 className="text-3xl font-extrabold text-gray-800">To-Do List</h1>

      <div className="flex mt-5 gap-3 justify-center items-center w-full">
        <input
          type="text"
          placeholder="Enter Task"
          value={taskName}
          onChange={(e) => setTaskName(e.target.value)}
          className="text-lg rounded-xl border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"
        />
        <button
          className="bg-black text-white px-4 py-2 rounded-xl hover:bg-gray-800 transition duration-200"
          onClick={addTask}
        >
          <h1 className="text-lg font-bold">Add</h1>
        </button>
      </div>

      {/* Rendering List Component */}
      <List todos={todos} onDelete={onDelete} onChecked={onChecked} />
    </div>
  );
};

export default Card;

List组件 #

import React, { useEffect } from 'react';

interface Data {
  name: string;
  status?: boolean;
}

interface ListProps {
  todos: Data[];
  onDelete:  (name: string) => void;
  onChecked: (name: string) => void;
}

const List: React.FC<ListProps> = ({ todos, onDelete, onChecked }) => {

  useEffect(() => {
    console.log(todos);
  }, [todos]);

  return (
    <div className="flex flex-col justify-start items-center w-full mt-10 gap-3">
  {todos.map((todo, index) => (
    <div
      key={index}
      className="flex justify-between items-center w-full bg-white shadow-md rounded-lg px-4 py-3 border border-gray-300"
    >
      <input
        type="checkbox"
        checked={todo.status}
        onChange={() => onChecked(todo.name)}
        className="w-5 h-5 text-blue-500 accent-blue-500 cursor-pointer"
      />
      <p className={`text-lg ${todo.status ? "line-through text-gray-500" : "text-black"}`}>
        {todo.name}
      </p>
      <button
        onClick={() => onDelete(todo.name)}
        className="bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition duration-200"
      >
        Delete
      </button>
    </div>
  ))}
</div>
  );
};

export default List;

解决方案 #

问题根源是卡片容器的flex布局未正确分配空间，且列表区域未设置溢出滚动属性。只需调整两处样式：

1. 修改Card组件的外层容器布局 #

将最外层div的justify-center改为justify-start，避免内容垂直居中导致溢出；同时给列表区域添加容器，设置flex-1占据剩余高度，overflow-y-auto实现垂直滚动：

修改后的Card组件返回部分：

return (
  <div className="py-5 px-7 pb-5 shadow-xl w-max flex flex-col justify-start items-center rounded-lg bg-white h-[75%]">
    <h1 className="text-3xl font-extrabold text-gray-800">To-Do List</h1>

    <div className="flex mt-5 gap-3 justify-center items-center w-full">
      <input
        type="text"
        placeholder="Enter Task"
        value={taskName}
        onChange={(e) => setTaskName(e.target.value)}
        className="text-lg rounded-xl border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"
      />
      <button
        className="bg-black text-white px-4 py-2 rounded-xl hover:bg-gray-800 transition duration-200"
        onClick={addTask}
      >
        <h1 className="text-lg font-bold">Add</h1>
      </button>
    </div>

    {/* 添加滚动容器包裹List */}
    <div className="flex-1 w-full overflow-y-auto mt-10">
      <List todos={todos} onDelete={onDelete} onChecked={onChecked} />
    </div>
  </div>
);

2. 调整List组件的容器样式 #

移除List组件外层div的mt-10（已在父容器设置），保持布局紧凑：

修改后的List组件返回部分：

return (
  <div className="flex flex-col justify-start items-center w-full gap-3">
    {todos.map((todo, index) => (
      <div
        key={index}
        className="flex justify-between items-center w-full bg-white shadow-md rounded-lg px-4 py-3 border border-gray-300"
      >
        <input
          type="checkbox"
          checked={todo.status}
          onChange={() => onChecked(todo.name)}
          className="w-5 h-5 text-blue-500 accent-blue-500 cursor-pointer"
        />
        <p className={`text-lg ${todo.status ? "line-through text-gray-500" : "text-black"}`}>
          {todo.name}
        </p>
        <button
          onClick={() => onDelete(todo.name)}
          className="bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition duration-200"
        >
          Delete
        </button>
      </div>
    ))}
  </div>
);

修改完成后，当任务数量超过卡片剩余高度时，列表区域会自动生成垂直滚动条，内容不会超出卡片容器。

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