title: Get actual size of DIV including overflow (elements exceeding parent bound)
body: <p>Consider this example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var elem = document.getElementById("elem");
  
  alert(elem.offsetHeight + " " + elem.getBoundingClientRect().height);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="elem" style="position:relative; width: 100px; height: 100px; border: 1px solid black; box-sizing: border-box"&gt;
      &lt;div style="position: absolute; bottom: -15px;"&gt;Test&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you see my div actual height is 100px (as in its style) plus the exceeding part of its child (overflow). However both <code>offsetHeight</code> and <code>getBoundingClientRect().height</code> will return 100px, thus not taking into account the overflow part. I would expect something around 115px.</p>
  
  <p>So, how can I get the actual size of an arbitrary DIV taking into account all its children? Possibly please without jQuery.</p>
  
  <p><strong>EDIT:</strong> Regarding possible duplicate <a href="https://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element">CSS / JavaScript - How do you get the rendered height of an element?</a>, it's not what I was looking for.</p>