Contain drag overlay within parent container

[olee]

I have a virtualized table which is scrollable both horizontally and vertically, where rows are sortable. I'm using a <DragOveray /> to render the overlay for the dragged row, however I have an issue with the rendering:

As you can see in the screenshot, the DragOverlay is rendered outside the parent container because it is using position fixed. Currently I only see two solutions:

• Either restrict the width of the DragOverlay wrapper element to the width of the container (only works here because the axis is locked to vertical I guess)
• Use not position fixed but absolute to position the overlay if there exists a good solution for that

I didn't find any good example for the sortable usage in dnd-kit docs which uses DragOverlay with a list with both axis being scrollable. Could someone perhaps provide some solution for this or point me in the correct direction to solve this?

EDIT 1: Actually I noticed one more issue - when I scroll sideways, the table row stays it it's position horizontally instead of being moved to the left:

[papes1ns]

I believe I ran into a similar issue. The fix was to add the modifiers={[restrictToParentElement]} prop to my DragOverlay component