JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<box>
    <wide></wide>
</box>
<box>
    <thin></thin>
</box>

CSS

box {
    display: inline-block;
    width: 300px;
    height: 300px;
    overflow: auto; 
    border: 7px solid black;
    padding: 10px;
}

wide { 
    display: inline-block;
    width: 500px;
    height: 100px;
    background-color: red;
}

thin { 
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript

var boxes = document.getElementsByTagName('box');
Array.prototype.forEach.call(boxes, function (box) {
    var t = parseInt(window.getComputedStyle(box).borderTop, 10);
    var b = parseInt(window.getComputedStyle(box).borderBottom, 10);
    console.log(box.offsetHeight - box.clientHeight - t - b);
});