title: HTML - Scroll bar cuts off text
body: <p>I am trying to get an element to fit the remaining space (which <em>will</em> change) and then scroll if needed.  unfortunately it does not fit the remaining space correctly.</p>
  
  <p>Here is the code:</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-css lang-css prettyprint-override"><code>*{
   border: 1px dotted blue;
   vertical-align: top;
   overflow:hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
   &lt;tr&gt;
    &lt;td style="height:80vh; max-height:80vh;"&gt;
  
     &lt;details open&gt;
      &lt;summary&gt;Contents here will change in height&lt;/summary&gt;
     &lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;/details&gt;
  
     &lt;details id="FillMe" style="height:100%;overflow:auto;max-height:100%;margin:auto;" open&gt;
      &lt;summary&gt; Last element does not show&lt;/summary&gt;
       &lt;script&gt;
        var html = [];
        for(var i = 0;i &lt; 100; i++) html.push("&lt;br&gt; data "+ i);
        document.getElementById("FillMe").innerHTML += html.join('');
       &lt;/script&gt;
       &lt;br&gt;
       Last line of data
     &lt;/details&gt;
  
    &lt;/td&gt;
   &lt;/tr&gt;
  
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the fiddle showing the problem.
  <a href="https://jsfiddle.net/daxdax/anfvuLjw/1/" rel="nofollow noreferrer">https://jsfiddle.net/daxdax/anfvuLjw/1/</a>
  If you run it and scroll down you will not see the last element.</p>
  
  <p>I have looked on stackoverflow but cannot find the answer.
  <a href="https://stackoverflow.com/questions/47178142/elements-outside-of-scroll-area">Elements outside of scroll area</a>
  does not help.</p>
  
  <p>Setting height to 100% should fill the remaining space.  Why doesn't it?</p>