Correct usage of scrolling in flex/grid container?

[molzahn-sio]

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.

[derianpt]

@ralmo Did you ever get around to solving this? I'm facing the same problem

[molzahn-sio]

No, not really. A lot has changed and I didn't make use of movable containers at all since then (priorities have shifted).

[dzsodzso63]

I have the same problem. I think the best solution would be to have a prop where we explicitly can set the scrolling container element?

[mmukhin]

I was facing the same issue, and I put the "overflow" styles on the renderList={<div style={{overflow_styles_go_here}}/>} instead of putting the styles on the parent element wrapping the <List/>. In my local env its working, but its a little too "scroll happy" :)