In react-beautiful-dnd I conterminously get "Droppable: unsupported nested scroll container detected."

Question

Any idea why in react-beautiful-dnd I conterminously get "Droppable: unsupported nested scroll container detected." ?

react-beautiful-dndDroppable: unsupported nested scroll container detected. 
A Droppable can only have one scroll parent (which can be itself)Nested scroll containers are currently not supported.

Answer 1

This error message is indicating that a Droppable component in a user interface has detected an unsupported nested scroll container. A Droppable component is used for creating a drop target in a drag-and-drop interface, and it can only have one scroll parent. The error message is saying that there are multiple nested scroll containers, which is currently not supported.

I made the same mistake, To fix this check your overflow CSS properties and avoid nested scroll conditions

Answer 2

POSSIBLE SOLUTION to 'NESTED SCROLLING CONTAINER DETECTED' error This fix only applies if Overflow-X or Overflow-Y is being set on any parent container of the Droppable container

A fellow react developer and myself just spent several hours trying to solve this one. Here is what we discovered.

OUR SETUP We are using 'react-beautiful-dnd' with a 'react-virtualized' list, and using 'ant-design' as our UI Library.

WHAT TRIGGERS THE ERROR: ==> IF a parent to the Droppable container has Overflow-X or Overflow-Y set to (hidden or auto), without also setting the other 'X' or 'Y' to hidden. THEN react 'assumes on its own' and auto-sets the one you DID NOT SET, (either Overflow-Y or Overflow-X) to 'auto' ...triggering the error.

It is automatically setting the one you did not set, to 'auto', turning the parent into a 'Scrolling Container'.

TO FIX THIS:

• In our case, we removed the Overflow-X (hidden or auto) style from the parent container, and replaced it with (Overflow: 'hidden'). You could also just ensure that NO OVERFLOW setting is set, or set BOTH overflow X & Y to 'hidden'.
• Just DO NOT set one without the other!