JSFiddle - React, Tailwind, and code Playground

HTML

<button id="s">Shrink</button>
<button id="gw">Grow width</button>
<button id="gh">Grow height</button>
<div id=wrap>
    <div id=inner>
        <div id="block"></div>
            <p>some text some text some text some text</p>
    </div>
</div>

CSS

#wrap {
    background-color: #555;
    text-align: center;
    overflow: hidden;
    width: 200px;
    height: 200px;
}

#inner {
    min-height: 200px;
    min-width: 200px;
}

#block {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: red;
}

JavaScript

var w = document.querySelector("#wrap");
    var i = document.querySelector("#inner");
    w.addEventListener("overflow", function() {
        console.log("OVERFLOW");
        i.style.visibility = "hidden";
    }, false);
    w.addEventListener("underflow", function() {
        console.log("UNDERFLOW");
        i.style.visibility = "visible";
    }, false);
    document.querySelector("#s").addEventListener("click", function () {
        w.style.width = "100px";
        w.style.height = "100px";
    }, false);
    document.querySelector("#gw").addEventListener("click", function () {
        w.style.width = "200px";
    }, false);
    document.querySelector("#gh").addEventListener("click", function () {
        w.style.height = "200px";
    }, false);