Javascript CSS有两个列表，同步它们的垂直滚动，同时允许一个水平滚动

我有两个列表，其中列表1中的项目I与列表2中的项目I相关

我希望两个列表都可以垂直滚动，这样我的项目在两个列表中都有相同的滚动位置

但是列表2有更多的内容可以在屏幕上显示（比如排序时间线），所以我希望列表可以水平滚动（请注意，不是项目本身，而是整个列表），而列表1保持不变

有没有办法只在CSS中实现这一点

这就是我到目前为止所做的：

请注意，这只是说明这一点。实际项目是更大的DOM结构，而不仅仅是文本。 我更新了codesandbox来说明这一点

---

我似乎真的无法让水平滚动正常工作。任何帮助都将不胜感激。

将

宽度设置为适当的大值（例如
500px
），并在
.rightPaneItem
上设置
空白：nowrap

请记住，
.rightPaneItem
元素上的
width
属性的值需要根据内容最长的
rightPaneItem
的内容进行调整


函数应用程序（）{
返回(
左窗格
{新数组（100）.fill（0）.map（（_，i）=>(
项目{i}
))}
右窗格
{新数组（100）.fill（0）.map（（_，i）=>(
项目{i}的文本长度更长，因此您应该能够滚动
横向
))}
);
}
render（，document.getElementById（“根”））
.App{
文本对齐：居中；
最大高度：300px；
最大宽度：300px；
显示器：flex；
边框：3个绿色虚线；
溢出：自动；
填充物：5px；
}
.左窗格{
显示器：flex；
弯曲方向：立柱；
身高：100%；
弹性：1；
边框：2倍纯红；
填充物：5px；
}
.右窗格{
显示器：flex；
弯曲方向：立柱；
身高：100%；
弹性：2；
边框：2件纯蓝；
填充物：5px；
溢出-x：自动；
}
.leftPaneItem{
高度：20px；
}
.rightPaneItem{
高度：20px；
宽度：500px；
溢出x：隐藏；
空白：nowrap；
}

您的代码沙盒未打开。请检查它一次。无法访问您的代码沙盒链接，它说发生了一些错误。对不起，意外剪切了一封信。现在它起作用了。那么你能自己回答你的问题了？请将其标记为已回答。不，这是指couse的codesandbox。好的，也许我应该详细说明列表中的项目不仅仅是文本，而是更大的DOM结构。我更新了codesandbox示例，以说明我所说的不是文本，而是“随机”排列的结构。请参阅更新的答案。答案中包含的Codesandbox演示使用您在问题中更新的Codesandbox演示中使用的块。