JSFiddle - React, Tailwind, and code Playground

HTML

<div id='parent'>
    <div id='child'>
    </div>
</div>

CSS

#parent {
    width: 250px;
    height: 250px;
    overflow: hidden;
    background: blue;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#child {
    background: red;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 8px solid black;
     min-height: 100%;
     min-width: 100%;
}

JavaScript

var $ = function(e){ return document.getElementById(e); },
    $child = $('child'),
    $parent = $('parent');

var heightError = $child.offsetHeight - $parent.offsetHeight,
    widthError = $child.offsetWidth - $parent.offsetWidth;

alert('H: '+heightError+', W: '+widthError);

$child.style.marginBottom = -heightError + 'px';
$child.style.marginRight = -widthError + 'px';
$parent.style.paddingBottom = heightError + 'px';
$parent.style.paddingRight = widthError + 'px';
$parent.style.overflow = 'auto';

alert('Done!');