将DIV设为父级的100％滚动高度

Question

我有一个div，其滚动高度由绝对定位的孩子设置。我想添加另一个孩子（可以以任何方式放置），其高度是父母的滚动高度的100％。

body {
  background: #334;
  font-family: sans-serif;
  color: white;
}

.scroller {
  background-image: repeating-linear-gradient(45deg, orange, orange 10px, #cc8400 10px, #cc8400 20px);
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: auto;
}

.abs {
  background-image: repeating-linear-gradient(-45deg, purple, purple 10px, #4d004d 10px, #4d004d 20px);
  position: absolute;
  height: 2000px;
  width: 30px;
  margin: 20px 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.fullHeight {
  width: 100%;
  height: 100%;
  background: rgba(100, 100, 100, 0.75);
}

<div class="scroller">
  <div class="abs"></div>
  <div class="fullHeight"></div>
</div>

设置

（easier to read version on CodePen）

在此示例中，橙色条纹的框.scroller有2个孩子：

• .abs（紫色条纹）：一个绝对定位的元素，用于设置.scroller的滚动高度
• .fullHeight（半透明灰色）：无论如何都必须是.scroller
的完整滚动高度的元素

问题

.fullHeight从.scroller的显示尺寸中获取高度/宽度。向下滚动时，.fullHeight开始从屏幕顶部消失。它应该与.scroller的整个滚动高度一样高。

我尝试使用flex-box，将.abs放在一列中（没有绝对定位），将.fullHeight放在另一列中，但是.fullHeight仍然在显示高度.scroller。我也尝试过this black magic，但是我什至不确定应该如何工作。

问题

我如何让一个具有任意scroll-height的可滚动元素的子元素的高度等于其父元素的scroll-height？我想尽可能避免使用Javascript。