JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>
<div id="anchor">
    <div id="outer" class="red">
        <div id="middle">
            <div id="inner">
                <div id="content">
            </div>
        </div>
    </div>
</div>

CSS

div#anchor {
    position: relative;
    border: 1px solid purple;
}

div#outer {
    position: absolute;
    top: 5px;
    left: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: red;
    border-top: none;
    padding: 0px;
    margin: 0px;
}
div#middle {
    background-color: blue;
    overflow: auto;
    zoom: 1;
    width: 100%;
    height: 100%;
    position: relative;
    border: none;
    padding: 0px;
    margin: 0px;
}

div#inner {
    background-color: green;
    border: none;
    padding: 0px;
    margin: 0px;
}

div#content{
    border: none;
    padding: 0px;
    margin: 0px;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

JavaScript

$(function() {
    var $outer = $('#outer');
    $('#output').html(
        'height()='+$outer.height()+'<br>'+
        'css("height")='+$outer.css('height')+'<br>'+
        'outerHeight(false)='+$outer.outerHeight(false)+'<br>'+
        'outerHeight(true)='+$outer.outerHeight(true)+'<br>'+
        'innerHeight()='+$outer.innerHeight()+'<br>'+
        'clientHeight='+$outer.get(0).clientHeight
    );
});