无需position:relative实现时间轴叠加滚动？或修复滚动空白

我设计了一款带日期/时间轴的网站，需要在时间轴上放置横向条形栏，要求日期轴可横向滚动，条形栏区域可纵向滚动。

当前布局要求.hScroll div可横向滚动，.content div可纵向滚动，HTML结构如下：

<div class="main">
  <div class="header">   
    <div>HEADER</div>  
  </div>
  <div class="hScroll">
    <div class="dates">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    <div class="content">
      <div class="bars">
        <div></div>
        <div class="wk"></div>
        <div></div>
      </div>
      <div class="overlay">
        <div style="top: 20px; left: 200px;"></div>
        <div style="top: 400px; left: 1200px;"></div>
      </div>
    </div>
  </div>
</div>

CSS样式如下：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  height: 45px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3c5db2;
  color: rgb(240,240,240);
}
.hScroll {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: rgb(200,200,200);
  overflow-x: scroll;
}
.dates {
  display: flex;
  width: 2000px;
  height: 30px;
  background-color: rgb(66, 133, 244);
}
.dates > div {
  padding: 5px;
  height: 100%;
  width: 200px;
  border-right: solid 2px rgb(240,240,240);
  color: rgb(240,240,240);
}
.content {
  flex-grow: 1;
  width: 2000px;
  overflow-y: scroll;
  font-size: 1.5em;
  line-height: 3em
}
.bars {
  display: flex;
}
.bars > div {
  width: 200px;
  border-right: solid 2px rgb(240,240,240);
  height: 1000px;
}
.overlay {
  position: relative;
  top: -1000px;  
}
.overlay div {
  position: relative;
  height: 20px;
  width: 250px;
  background-color: red;
}
.wk {
  background-color: rgb(220,220,220);
}

现咨询两个问题：

1. 是否可不使用position:relative实现相同的滚动与叠加效果？
2. 若无法替代，该如何修复.content div末尾出现的空白区域？

一、不用position:relative的替代方案 #

可以用CSS Grid实现更直观的叠加效果，同时保留原有的滚动特性：

方案：CSS Grid布局 #

将.content设置为Grid容器，让.bars和.overlay直接重叠在同一个网格区域，不需要依赖相对定位的偏移：

.content {
  flex-grow: 1;
  width: 2000px;
  overflow-y: scroll;
  font-size: 1.5em;
  line-height: 3em;
  /* 新增Grid布局 */
  display: grid;
  position: relative; /* 作为内部绝对定位元素的参考 */
}
/* 让两个元素占据同一个网格单元格，实现叠加 */
.bars, .overlay {
  grid-area: 1 / 1;
}
/* 内部红色条改用绝对定位控制位置 */
.overlay div {
  position: absolute;
  height: 20px;
  width: 250px;
  background-color: red;
}

这个方案完全去掉了top: -1000px的hack写法，通过Grid的特性自然实现元素叠加，滚动行为不受影响。

二、修复.content末尾空白的方法 #

原方案中出现空白，是因为.overlay用top: -1000px偏移后，仍会占据自身的默认高度空间，导致.content总高度被额外拉长。有两种简单的修复方式：

方法1：让.overlay不占据高度空间 #

给.overlay设置高度为0，并允许内部元素溢出显示：

.overlay {
  position: relative;
  top: -1000px;
  height: 0; /* 让overlay不占额外高度 */
  overflow: visible; /* 确保红色条能正常显示 */
}

方法2：改用绝对定位替代相对偏移 #

把.overlay设置为绝对定位，相对于.content定位，这样它不会占据.content的高度空间：

.content {
  position: relative; /* 添加参考定位 */
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.overlay div {
  position: absolute; /* 内部元素用绝对定位控制位置 */
  height: 20px;
  width: 250px;
  background-color: red;
}

这种方法同时解决了空白问题，还优化了原有的hack式偏移写法，代码更健壮。

内容的提问来源于Stack Exchange，提问作者Oehoe