I'm having trouble to get scrolling within nested containers to work properly and I hope that you can point me in the right direction.

Description:

• My layout is created using a CSS grid without having any exact width/height values (responsive)
• One of the fields is completely filled by a reactstrap Card component C
• C contains the actual list L which manages/includes the movable list entries

A simplified example can be found here: https://codesandbox.io/s/snowy-glitter-mwibr
(With explicit size for display of the main container)

Question:
Given these circumstances I seem to be unable to get scrolling to work:

• As far as I know I need to set overflow on C due to limitations regarding overflow scrolling within flex/grid layouts when not setting width/heights explicitly. But if I do that, react-movable doesn't seem to be able to pick up the scrolling necessities (see previous example)

• I also tried to include C within L.renderList which solves the scrolling issue but when I try to drag an item the whole list is displayed as movable object --> https://codesandbox.io/s/icy-fire-s3g2r

• The last thing I tried was setting overflow on L directly but then overflow is not working at all --> https://codesandbox.io/s/youthful-kalam-xowyt

Any help regarding the correct practice would be much appreciated as I really enjoy this simple to use but effective package!

Thanks.