I am using react-beautiful-dnd for my project where I have multiple columns and items to be dragged along those columns. Drag&Drop feature is working well as expected. I also have other elements in the page such as a Sidebar or header, so, in the case of having too many columns, I want the scroll operation to be performed only inside Drag&Drop container. However, wrapping that with overflow-x: scroll breaks the scroll behavior while dragging a task from the first column to the last.

<h1>My Page</h1>
<div className="columns" style={{ overflowX: 'scroll' }}> // overflowX breaks scrolling while dragging
    <DragDropContext onDragEnd={ result => onDragEnd(result, columns, setColumns) }>
        ...
    </DragDropContext>
</div>

Can anyone help me with this?