title: Scrollbar height formula not working
body: <p>I'm trying to build a custom scrollbar. I got stuck calculating the correct height for the scrollbar thumb. I did what <a href="https://stackoverflow.com/questions/10257421/custom-scrollbar-maths-in-jquery-javascript#comment13190186_10259404">this comment</a> said to do (and other places I checked said the same formula):</p>
  
  <pre><code>scrollbarArea.offsetHeight * container.offsetHeight / content.scrollHeight
  </code></pre>
  
  <p>I did the same thing, but the scrollbars thumb is smaller than expected. How can I get the scrollbars thumb to be a regular height based on the height, and scrollHeight?</p>
  
  <p><a href="https://jsfiddle.net/y5qooa75/" rel="nofollow noreferrer"><h3>JSFiddle</h3></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.clear();
  
  var innerWrapper = document.getElementById('innerWrapper');
  var scrollBarThumb = document.getElementById('scrollbar_thumb');
  
  scrollBarThumb.style.height = (2 * innerWrapper.scrollHeight / innerWrapper.scrollHeight) + 'px';
  console.log(innerWrapper.scrollHeight, innerWrapper.offsetHeight);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#outerWrapper {
    height: 500px;
    display: flex;
    background-color: burlywood;
  }
  #content {
    width: 400px;
  }
  #scrollbar {
    height: 100%;
    width: 50px;
    background-color: orange;
  }
  #scrollbar_thumb {
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outerWrapper"&gt;
    &lt;div id="innerWrapper"&gt;
      &lt;div id="content"&gt;
        Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
        Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae
        libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse
        vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia
        Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla.
        Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan
        nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque
        accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem
        lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="scrollbar"&gt;
      &lt;div id="scrollbar_thumb"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>