JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Make sure the result pane is larger than 200px by 200px and the <code>&lt;body&gt;</code>'s <code>scrollWidth</code> and <code>scrollHeight</code> will be greater than 200px.</li>
    <li>Ditto for <code>&lt;html&gt;</code>.</li>
</ul>

CSS

html {
    border:  3px solid blue;
    padding: 50px;
    margin:  0;
    /*
    width:   100%;
    height:  100%;
    */
}
body {
    border:  3px solid red;
    height:  200px;
    width:   200px;
    padding: 10px;
    margin:  0 auto;
}

JavaScript

var $html = $("html")
,   $body = $("body")
,   bodyOffset = $body.offset()
;

console.log("html.scrollWidth: "  + $html[0].scrollWidth );
console.log("html.scrollHeight: " + $html[0].scrollHeight );

console.log("----------------------------------------");

console.log("body.scrollWidth: "  + $body[0].scrollWidth );
console.log("body.scrollHeight: " + $body[0].scrollHeight );

console.log("----------------------------------------");

console.log("$html.outerHeight: " + $html.outerHeight() );
console.log("$html.innerHeight: " + $html.innerHeight() );
console.log("$body.outerHeight: " + $body.outerHeight() );
console.log("$body.innerHeight: " + $body.innerHeight() );

console.log("----------------------------------------");

console.log("$body.offset().top: "  + bodyOffset.top);
console.log("$body.offset().left: " + bodyOffset.left );