JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>
      Contain: Paint & Overflow: Clip
    </title>
  </head>

  <body>
    <div id="container" style="width: 50px; height: 50px; overflow: clip;">
      <div id="outer" style="width: 75px; height: 75px; background: lime;">
        <div id="inner" style="width: 100px; height: 100px; background: blue;">Clip</div>
      </div>
    </div>
  <p>
  
    <div id="visible_container" style="width: 50px; height: 50px; overflow: visible;">
      <div id="visible_outer" style="width: 75px; height: 75px; background: black;">
        <div id="visible_inner" style="width: 100px; height: 100px; background: green;">Visible</div>
      </div>
    </div>
    <p>
        
    <div id="results">
    
    </div>
    <script>
      var results = document.getElementById("results");
      results.innerHTML = "Clip Container scrollWidth: " + container.scrollWidth + "<br />" +
      "Clip Container scrollHeight: " + container.scrollHeight + "<br />" +
      "Clip Outer scrollWidth: " + outer.scrollWidth + "<br />" +
      "Clip Outer scrollHeight: " + outer.scrollHeight + "<br />" +
      "Clip Inner scrollWidth: " + inner.scrollWidth + "<br />" +
      "Clip Inner scrollHeight: " + inner.scrollHeight + "<br /><br />" +
      "Visible Container scrollWidth: " + visible_container.scrollWidth + "<br />" +
      "Visible Container Height: " + visible_container.scrollHeight + "<br />" +
      "Visible Outer scrollWidth: " + visible_outer.scrollWidth + "<br />" +
      "Visible Outer scrollHeight: " + visible_outer.scrollHeight + "<br />" +
      "Visible Inner scrollWidth: " + visible_inner.scrollWidth + "<br />" +
      "Visible Inner scrollHeight: " + visible_inner.scrollHeight + "<br /><br />";
    </script>
  </body>

</html>

CSS

#inner,
#visible_inner {
  color: white;
}