我正在创建一个像“Trello”这样的应用程序，我遇到了一些问题。我创建了“Board”，“Cards”和“Tasks”。每张卡片的宽度为300 px。如果我创建的卡片超过网站能够显示的数量，它将关闭屏幕（和和整个页面底部的滚动条出现），我想只把那个滚动条添加到“Board”div.这就是我所做的，和，滚动条出现了，和预期的一样工作..但问题是，我不能再在其他空卡之间移动任务。我可以移动（sort），但不能移动到空卡......我使用react with tailwindcss和“@hello-pangea/dnd”作为react-beautiful-dnd的替代。我已经尝试过其他库，但是我不能使工作（整个dnd），因为我想要的（效果我得到了这个库......）以下是整个代码：

function Task({ task, index }) { <==TASKS
  return (
    <Draggable draggableId={task._id} index={index} type="task">
      {(provided) => (
        <div
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={provided.innerRef}
          className="bg-white rounded p-4 shadow mb-4 relative"
        >
          {task.name}
        </div>
      )}
    </Draggable>
  );
}

function Section({ section, index }) {  <==CARDS
  return (
    <Draggable draggableId={section._id} index={index}>
      {(provided) => (
        <div
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={provided.innerRef}
          className="w-[300px] p-2 mb-4"
        >
          <div className="bg-white rounded p-4 shadow mb-4">
            <h2 className="text-lg font-bold">{section.name}</h2>
            <Droppable droppableId={section._id} type="task">
              {(provided) => (
                <div
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  className="min-w-full overflow-visible"
                >
                  {section.tasks.map((task, index) => (
                    <Task
                      key={task._id}
                      task={task}
                      index={index}
                      sectionId={section._id}
                    />
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
            
          </div>
        </div>
      )}
    </Draggable>
  );
}

function Tasks({ project }) { <==BOARD
  const [state, setState] = useState(project);

  const onDragEnd = (result) => {
    const { destination, source, draggableId, type } = result;

    // If the item was dropped outside of a droppable area, exit
    if (!destination) {
      return;
    }

    // If the item was dropped in the same position, exit
    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    if (type === "task") {
      const sourceSection = state.sections.find(
        (section) => section._id === source.droppableId
      );
      const destinationSection = state.sections.find(
        (section) => section._id === destination.droppableId
      );

      // Move the task to the new section
      const task = sourceSection.tasks.splice(source.index, 1)[0];
      destinationSection.tasks.splice(destination.index, 0, task);

      // Update the state
      setState((prevState) => ({
        ...prevState,
        sections: [...prevState.sections],
      }));
    } else {
      // Move the section to the new position
      const section = state.sections.splice(source.index, 1)[0];
      state.sections.splice(destination.index, 0, section);

      // Update the state
      setState((prevState) => ({
        ...prevState,
        sections: [...prevState.sections],
      }));
    }
  };

  return (
    <div className="flex">** <== HERE I ADDED OVERWFLOW X AUTO**
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="sections" direction="horizontal" className="h-max">
          {(provided, snapshot) => (
            <div {...provided.droppableProps} ref={provided.innerRef}  className="h-full flex">
              {state.sections.map((section, index) => (
                <Section key={section._id} section={section} index={index} />
              ))}
              {provided.placeholder}
            </div>
          )}
          
        </Droppable>
       
      </DragDropContext>
    </div>
  );
}

我试着把我添加溢出的div的高度设置为一个固定的高度，但是没有用..没有别的，因为我没有看到任何人有这个问题...
编辑/我试过添加一个“虚拟”任务（空的），但是看起来很奇怪...（但是成功了）。
Edit 2/我试着从这里得到一些东西：https://github.com/marconunnari/trello-clone但是，因为我们有不同的方法在“应用程序”，这对我来说有点困难...