CSS 网格 - 具有独立可滚动区域的两列布局

Question

我想实现一个布局，其中有两列适合屏幕的高度。

• 左列有两行，每一行占可见可用高度的50%（没有固定高度，应该是响应式的）。如果每行的内容大于 50%，它应该是可滚动的。
• 右栏占全高。如果其内容跨越可见屏幕，则应显示滚动条。

这里是一些 prototype，它显示了行为。右侧正在工作。但是我需要左侧的一些帮助。我错过了什么？