Horizontal auto-scrolling stops working when child Droppable has overflow: auto

[Jrhero14]

Horizontal auto-scrolling stops working when child Droppable has overflow: auto

Expected behavior

When dragging a Draggable item (Task) towards the edge of the main container (the board), the container should auto-scroll horizontally to reveal columns that are currently off-screen. This allows moving tasks between columns that are far apart.

Actual behavior

When I apply overflow: 'auto' (or overflow-y: auto) to the column's Droppable container to handle vertical scrolling of tasks within a fixed-height stage, the horizontal auto-scroll of the main parent container stops working. The drag operation feels "stuck" inside the column's bounds or simply fails to trigger the parent's scroll.

If I remove overflow: 'auto' from the column styles, horizontal auto-scrolling works perfectly, but then the columns expand indefinitely instead of scrolling vertically.

Steps to reproduce

1. Create a horizontal Kanban board layout.
2. Set the main board container to overflow-x: auto and fixed height.
3. Set the inner column (Droppable) to have overflow: auto so it scrolls vertically when filled with tasks.
4. Drag a task from a column on the left towards the right edge of the screen.
5. Observe that the main board does not scroll right.

Suggested solution?

It seems like the library's auto-scroller detects the scrollable child container (the column) and focuses on scrolling that, failing to bubble up or trigger the parent window/container horizontal scroll. A possible fix might involve checking if the scrollable child has reached its edge or if the drag direction (horizontal) warrants ignoring the vertical scroll container.

What version of React are you using?

^19.2.0

What version of @hello-pangea/dnd are you running?

18.0.1

What browser are you using?

Chrome / Brave

Demo

2026-01-30.16-01-49.mp4

Here is a simplified version of the code that reproduces the issue. The critical part is the overflow: 'auto' in the inner Droppable.

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';

// ... (setup code for initialStages, initialColumns, reorder helpers same as standard examples)

const KanbanBoard = () => {
    // ... (state setup)

    return (
        <div style={{ height: '100vh' }}>
            <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="kanban" direction="horizontal" type="COLUMN">
                    {(provided) => (
                        <div
                            ref={provided.innerRef}
                            {...provided.droppableProps}
                            style={{
                                display: 'flex',
                                gap: 16,
                                padding: 16,
                                overflowX: 'auto', // Main Horizontal Scroll
                                height: '80vh',
                                background: '#f4f5f7'
                            }}
                        >
                            {stages.map((stage, index) => (
                                <Draggable draggableId={stage.id} index={index} key={stage.id}>
                                    {(provided) => (
                                        <div
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            style={{
                                                minWidth: 260,
                                                display: 'flex',
                                                flexDirection: 'column',
                                                ...provided.draggableProps.style
                                            }}
                                        >
                                            <h4 {...provided.dragHandleProps}>{stage.title}</h4>

                                            <Droppable droppableId={stage.id} type="TASK">
                                                {(provided, snapshot) => (
                                                    <div
                                                        ref={provided.innerRef}
                                                        {...provided.droppableProps}
                                                        style={{
                                                            flexGrow: 1,
                                                            minHeight: 100,
                                                            // THE ISSUE IS HERE:
                                                            // When this is set to 'auto', horizontal parent scroll breaks during drag.
                                                            overflow: 'auto', 
                                                            background: '#f8f9fa'
                                                        }}
                                                    >
                                                        {/* Tasks... */}
                                                        {columns[stage.id].map((task, index) => (
                                                            <Draggable key={task.id} draggableId={task.id} index={index}>
                                                                {(provided) => (
                                                                    <div
                                                                        ref={provided.innerRef}
                                                                        {...provided.draggableProps}
                                                                        {...provided.dragHandleProps}
                                                                    >
                                                                        {task.content}
                                                                    </div>
                                                                )}
                                                            </Draggable>
                                                        ))}
                                                        {provided.placeholder}
                                                    </div>
                                                )}
                                            </Droppable>
                                        </div>
                                    )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        </div>
    );
};