offsetHeight vs scrollHeight with overflow:hidden

HTML

<div> Output: <span id='output'> </span> </div>
<div id="parent">
    <h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam obcaecati.
    </h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum reprehenderit sequi excepturi accusantium perspiciatis beatae dignissimos quibusdam enim architecto. Saepe asperiores culpa sed id repellat dolorem qui in voluptatum deleniti consectetur. Fugiat esse blanditiis culpa incidunt ipsa est quam officia! Accusantium laudantium illum vero ad consequatur ut fuga officiis! Placeat?
    </p>
    <h4> Lorem ipsum dolor sit amet. </h4>
</div>

CSS

#parent {
    border: 1px solid blue;    
    height: 100px;
    
}

JavaScript

setInterval(function() {
    
    
    var output = $('output');
    var parent = $('parent');
    
    var results = {
        'parent height': parent.offsetHeight
        , 'parent scrollHeight': parent.scrollHeight
    };
    
    output.set('text', JSON.encode(results));
    
}, 100);