Bug: DragMoveEvent doesn't work when setting layout to h-full or height:100%

[NiceDay608088]

The case below is about moving item accross columns, DragMoveEvent is not trigged when setting h-full to div.

• it works without setting the h-full to div which wraps DndContext.
• it doesn't work setting the h-full to div which wraps DndContext.

pls refer to code below in DndKitBug.tsx

      {/* <div className="flex gap-10 ">   !!! works */}
      <div className="flex gap-10 h-full "> {/* !!! not working */}

• setup project using react, vite, react-router, tailwindcss, the package.json as below

  "dependencies": {
    "@dnd-kit/core": "^6.2.0",
    "@dnd-kit/sortable": "^9.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-slot": "^1.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.456.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.28.0",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^11.0.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/node": "^22.9.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "postcss": "^8.4.48",
    "tailwindcss": "^3.4.14",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.11.0",
    "vite": "^5.4.10"
  }

• App.tsx

import "./App.css";
import { Routes, Route } from "react-router-dom";
import DndKitBug from "./pages/mydndkit/DndKitBug";

function App() {
  return (
    <div className="app">
      <Routes>
        <Route path="/dndkitbug" element={<DndKitBug />} />
      </Routes>
    </div>
  );
}

export default App;

• App.css

.app {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

• DndKitBug.tsx

import {
  closestCorners,
  DndContext,
  DragMoveEvent,
  DragOverlay,
} from "@dnd-kit/core";
import { SortableContext, useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { ReactNode } from "react";

const ColumnsData = [
  { id: "c-1", label: "col-1", items: [{ id: "i-1", label: "item-1" }] },
  { id: "c-2", label: "col-2", items: [] },
];

const DndKitBug = () => {
  const handleDragOver = (event: DragMoveEvent) => {
    const { over } = event;
    console.log("over id:", over?.id);
  };

  return (
    <div className="h-screen w-screen ">
      {/* <div className="flex gap-10 ">   !!! works */}
      <div className="flex gap-10 h-full "> {/* !!! not working */}
        <DndContext
          collisionDetection={closestCorners}
          onDragOver={handleDragOver}
        >
          <SortableContext items={ColumnsData.map((column) => column.id)}>
            {ColumnsData.map((column) => (
              <Column key={column.id} id={column.id} label={column.label}>
                <SortableContext items={column.items.map((item) => item.id)}>
                  {column.items.map((item) => (
                    <Item key={item.id} {...item} />
                  ))}
                </SortableContext>
              </Column>
            ))}
          </SortableContext>
          <DragOverlay adjustScale={false}>
            {<Item id="i-1" label="item-1" />}
          </DragOverlay>
        </DndContext>
      </div>
    </div>
  );
};

interface ColumnProp {
  id: string;
  label: string;
  children: ReactNode;
}

const Column = ({ id, label, children }: ColumnProp) => {
  const {
    attributes,
    setNodeRef,
    listeners,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: id,
    data: {
      type: "column",
    },
  });

  return (
    <div
      {...attributes}
      ref={setNodeRef}
      style={{
        transition,
        transform: CSS.Translate.toString(transform),
      }}
      className="w-[200px] bg-gray-100 flex flex-col gap-5 px-4 py-5"
    >
      <div
        className="text-center font-bold bg-green-400 text-white"
        {...listeners}
      >
        {label}
      </div>
      {children}
      <button className="text-center  text-xl">+</button>
    </div>
  );
};

interface ItemProp {
  id: string;
  label: string;
}

const Item = ({ id, label }: ItemProp) => {
  const {
    attributes,
    setNodeRef,
    listeners,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: id,
    data: {
      type: "item",
    },
  });

  return (
    <div
      ref={setNodeRef}
      {...attributes}
      {...listeners}
      style={{
        transition,
        transform: CSS.Translate.toString(transform),
      }}
      className={`w-full text-center border border-black rounded-md p-4 ${
        isDragging && "opacity-50"
      }`}
    >
      {label}
    </div>
  );
};

export default DndKitBug;

• Work as expected, over id: c-2 shows correctly when moving item over column col-2, refer to the log in right dev-tool in the img
  

• Work not correct, nothing shows when moving item over column col-2, which means the DragMoveEvent is not triggered, ,refer to the log in right dev-tool in the img.