css - 如何在“溢出：隐藏”div中启用滚动

Question

我已经用react-beautiful-dnd. 它按我想要的方式工作。

我希望能够在div具有overflow: hidden. 但是，这样做可以防止在视口之外的列中拖动卡片，屏幕不再水平向右滚动。

我正在简化问题，我需要这样做的原因是因为我使用的是 Layout 组件，该content组件是带有overflow: hidden.

这是一个演示问题的代码框

基本上，这是可行的，我可以将 Card 拖放到右侧，它会水平滚动：

<div style={{ overflow: 'unset}} >
    <Kanban />
<div>

这不会：

<div style={{ overflow: 'hidden }} >
    <Kanban />
<div>

也许有一种方法可以像这样重置第一个 div？：

<div style={{ overflow: 'hidden }} >
    <div style={{ }}> // something here to reset container div?
        <Kanban />
    </div>
<div>