Get actual size of DIV including overflow (elements exceeding parent bound)

Question

Consider this example:

 var elem = document.getElementById("elem"); alert(elem.offsetHeight + " " + elem.getBoundingClientRect().height); 

 <div id="elem" style="position:relative; width: 100px; height: 100px; border: 1px solid black; box-sizing: border-box"> <div style="position: absolute; bottom: -15px;">Test</div> </div> 

As you see my div actual height is 100px (as in its style) plus the exceeding part of its child (overflow). However both offsetHeight and getBoundingClientRect().height will return 100px, thus not taking into account the overflow part. I would expect something around 115px.

So, how can I get the actual size of an arbitrary DIV taking into account all its children? Possibly please without jQuery.

EDIT: Regarding possible duplicate CSS / JavaScript - How do you get the rendered height of an element? , it's not what I was looking for.

Answer 1

elem.scrollHeight

https://jsfiddle.net/LLfeh8nk/

alert(elem.scrollHeight + " " + elem.getBoundingClientRect().height);