title: CSS: Make Absolute item in Overflow-Y always fill 100% of Scroll Height
body: <p>I wanna make this absolutely positioned bar fill 100% of this overflow-y container's scroll height &amp; change dynamically (if possible).</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;container&quot;&gt;
    &lt;div id=&quot;item&quot;&gt;&lt;/div&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>#container {
    height: 300px;
    overflow-y: scroll;
    background-color: #333;
    position: relative;
  }
  
  #item {
    position: absolute;
    left: 50px;
    width: 2px;
    background-color: lightgreen;
    height: 100%;
  }
  </code></pre>
  <p><a href="https://codepen.io/springer268/pen/oNZJrjN" rel="nofollow noreferrer">https://codepen.io/springer268/pen/oNZJrjN</a></p>
  <p>// sidenote
  Hacky solutions that don't work in my use case include making it position fixed, or making it absolute to another div above. It has to be relative to this container (zooming issues + other thing.) and actually change height. I'd really like to avoid JS here (using React &amp; it'd get all funky).</p>
  <p>Thanks</p>