Make DIV 100% Scroll Height of Parent

Question

I have a div whose scroll height is set by an absolutely positioned child. I'd like to make add another child (which can be positioned in any way) have 100% the height of the parent's scroll-height.

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>

The Setup

(easier to read version on CodePen)

In this example, the orange-striped box .scroller has 2 children:

• .abs (purple stripes): an absolutely positioned element that sets the scroll height of .scroller
• .fullHeight (translucent gray): an element that by whatever means has to be the full scroll-height of .scroller

The Problem

.fullHeight takes it's height/width from the display dimensions of .scroller. As soon as you scroll down, .fullHeight begins to disappear off the top of the screen. It should be as tall as .scroller's entire scroll-height.

I've tried using flex-box, putting .abs in one column (without absolute positioning) and .fullHeight in the other, but .fullHeight still maxes out at the display height of .scroller. I've also tried this black magic, but I'm not even sure how that's supposed to work.

The Question

How can I have a child of a scrollable element of arbitrary scroll-height have a height equal to the scroll-height of its parent? I'd like to avoid Javascript if at all possible.