7

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.
Dan I
  • 71
  • 1
  • 1
  • 2
  • 8
    Hello Dan, you should check the issue here: https://github.com/atlassian/react-beautiful-dnd/issues/362#issuecomment-375528521 Adding ``{{overflow:auto}}`` to DragDropContext element nested in a div (or any other tag) should fix it. – Eazy Oct 19 '20 at 18:01
  • 3
    If you're using Material UI, check this issue for my fix: https://github.com/atlassian/react-beautiful-dnd/issues/362#issuecomment-712353246 – Eazy Oct 19 '20 at 18:13

2 Answers2

0

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

Shivam Puri
  • 1
0

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!
InstantHuman
  • 1
  • 1