具有不同方向的多个滚动区域的CSS网格

Question

我正在尝试使用HTML和CSS构建一个相当复杂的网格。它看起来像这样：

• 左列不会水平滚动
• 其他列水平滚动（显示4列，滚动溢出可隐藏100列）
• 黄色/红色标题不垂直滚动
• 灰色行垂直滚动（显示5行，滚动溢出可隐藏100行），2个独立的部分（即红色标题行划分两个独立的垂直滚动列表）
• 整个网格是固定的宽度/高度

似乎无论我如何切割网格，某些内容都无法按预期滚动：

• 如果我将左列放在<div>中，而将右列放在<div>中，我可以实现所需的右列水平滚动，但是左侧和左侧之间不会同步垂直滚动右边，右列中滚动条的存在与左右之间的网格行不对齐。
• 如果我将灰色行放在<div>中，红色/黄色标题放在<div>中，则灰色行的垂直滚动按需要工作，但水平滚动不会滚动标题和行在一起，左列只是与行水平滚动而不是保持固定。

在某些情况下，我能够使用JavaScript同步滚动，但是在使用鼠标滚轮时看起来非常糟糕。

有没有办法用CSS做到这一点？

如果我们删除列表的下半部分（因此只有一个垂直滚动行的区域）只用CSS可以实现吗？