如何用CSS/HTML实现第一列满高、第二列垂直滚动的双列div？

我现在遇到一个看似简单的布局需求：

• 将一个div的内容分为两列
• 第一列填满容器高度，第二列内容可垂直溢出
• 滚动容器时，第二列的顶部内容需衔接在第一列的底部

此前我尝试使用column-count属性，但遇到了两个问题：

• 设置height:100%时，右侧会新增列，同时出现横向滚动条
• 不设置高度时，内容会持续在第一列排列，必须先滚动读完第一列才能查看第二列内容

尝试的代码 #

CSS #

.container {
  display: inline-block;
  margin-right: 30px;
  width: 150px;
  height: 150px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.cols {
  height: 100%;
  column-count: 2;
  column-fill: auto;
}

.cols-2 {
  column-count: 2;
}

HTML #

<div class="container">
<div class="cols">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="container">
<div class="cols-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

请问能否仅通过CSS/HTML实现该效果？目标效果如下（滚动前/滚动中/滚动后）：

内容的提问来源于stack exchange，提问作者Rafalon