JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bar">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbb
    cccccccccccccc
    <pre>
        
        
        
        d</pre>
</div>

CSS

#bar {
    width: 100px;
    height: 100px;
    border: 10px solid yellow;
    background-color: #4679BD;
    padding: 10px;
    margin: 10px;
    overflow: scroll;
}
pre {
    margin: 0;
    padding: 0;
    border: 0;
}

JavaScript

var b = document.getElementById("bar");

// 180 = 100 + 10 + 10 + 10 + 10
console.log("offsetHeight: ", b.offsetHeight); 
// ~= 103 = 100 + 10 + 10 - 滚动条高度
console.log("clientHeight: ", b.clientHeight);

console.log("scrollHeight: ", b.scrollHeight);