Unsupported nested scroll container detected on direction="horizontal", flex box with overflow-auto

[Aniket-IN]

I'm pretty new to React Beautiful DND,

Trying to make a horizontal DND. So, I have only one parent with flex and overflow auto and a fixed width. Something like:

Everything including the drag and drop functionality works fine.. but I don't know why whenever I drag something, I get this message on the console.

It looks like it's a common issue, but I can't figure out :(

I'm doing something like:

<DragDropContext onDragEnd={onDragEnd}>
    <Droppable direction="horizontal" droppableId="product-images-droppable">
        {(provided) => (
            <div 
            className="w-full h-44 flex gap-3 overflow-x-auto" // this is the only scrollable parent  container
            ref={provided.innerRef} {...provided.droppableProps}
            >
                {parentData.images.map((image, index) => (
                    <ImageItem // This component's code below
                        key={image} 
                        image={image} 
                        index={index} 
                    />
                ))}
                {provided.placeholder}
            </div>
        )}
    </Droppable>
</DragDropContext>

// Here is the ImageItem component
<Draggable index={index} draggableId={image}>
    {(provided) => (
        <div {...provided.draggableProps} {...provided.dragHandleProps} 
        className="group relative h-full aspect-square" ref={provided.innerRef}>
            <img 
            src={image}
            className="inset-0 absolute w-full h-full group-hover:opacity-80 object-contain object-center transition-all duration-200 ease-out" />
        </div> 
    )}
</Draggable>

Thanks in advance, React beautiful DND is really awesome :D

[ghost]

Possible duplicate of #131 which is basically the critical issue for the whole project :(

[MarinaNovas]

Hi, did you happen to fix your problem? I get the same message on the console too, however my app works fine( including drag and drop functionality and scroll.) what I didn't do, but still get this message. I read issue #131, but I still don't understand how to get rid of this message.

[Aniket-IN]

hi, same me everything works fine too... I just ignored the warning for now.

The warning says to do something with nested containers, But i dont understand I just have a single container. The only difference is its just horizontal instead of vertical I dont really understand what's the problem here..

[aleexnl]

Project won't recibe major updates as README says so, maybe you should move to react-dnd as I did. Note that this is also recommended in README of the project.

[section14]

@aleexnl This issue still exists with react-dnd.

[Aniket-IN]

Looks like this a known limitation of this library. In new projects, I've started using dnd-kit

[InstantHuman]

POSSIBLE SOLUTION to 'NESTED SCROLLING CONTAINER DETECTED' error Hi all... I posted a solution that my fellow developer and I discovered. Our Comment Link is here: https://github.com/atlassian/react-beautiful-dnd/issues/131#issuecomment-1634398431