CSS ::高度为100％之后，将以视口高度结束，而不是高度为高的

Question

我正在尝试使用::after元素进行半透明覆盖。问题在于，叠加层需要跨越整个元素的高度，该高度比视口的高度还要长，但是我无法使叠加层的跨度超过视口。

.list::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: rgba(255, 0, 0, 0.5);
}

li {
  padding-bottom: 100px;
  border-bottom: 1px solid #ccc;
}

<ul class="list">
  <li>
    <strong>Scroll down, color overlay ends prematurely...</strong>
  </li>
  <li>Test</li><li>Test</li><li>Test</li><li>Test</li>
  <li>Test</li><li>Test</li><li>Test</li><li>Test</li>
  <li>Test</li><li>Test</li><li>Test</li><li>Test</li>
  <li>Test</li><li>Test</li><li>Test</li><li>Test</li>
  <li>Test</li><li>Test</li><li>Test</li><li>Test</li>
</ul>

如何使::after叠加层与其源元素的真实高度匹配？