JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="container">
  <div class="foo">
    The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewporty as clientHeight: it includes the element's padding, but not its border, margin or horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before or ::after. If the element's content can fit without a need for vertical scrollbar, its scrollHeight is equal to clientHeight
  </div>
</div>

CSS

.container {
  height: 100px;
  border: 2px solid red;
  overflow: scroll;
}
.foo {
  background: green;
  font-size: 3em;
  
}

JavaScript

var fooEl = document.querySelector('.foo');
console.log(fooEl.scrollHeight, fooEl.offsetHeight)