JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Overflow: Clip
    </title>
</head>
<body>
    <div id="target">
        <div id="exterior">
            <div id="interior"></div>
        </div>
    </div>
<br />
<a href="#" onClick="shrinkInterior();return false;">How does "clip" behave? Click here to find out.</a>



</body>
</html>

CSS

div {border: 1px solid black;}
#target {
  width: 200px;
  height: 200px;
  overflow: clip;
}

#exterior {
  width: 400px;
  height: 400px;
  background: url('https://i.stack.imgur.com/spmUM.gif');
}

#interior {
  width: 300px;
  height: 300px;
  background: lime;
}

JavaScript

target = document.getElementById('target');
console.log(target.scrollWidth);
console.log(target.scrollHeight);

var elem = document.getElementById("exterior");
var myinterior = document.getElementById("interior");
var extpos = 0;
var intpos = 50;

function frame() {
	  extpos -= 1;
    intpos += 1;
    elem.style.marginLeft = extpos + 'px'; 
    myinterior.style.marginLeft = intpos + 'px'; 
		if (extpos <= -350){
    	extpos = 0;
      intpos = 50;
    }
}

function shrinkInterior() {
    document.getElementById('interior').style.height = "100px";
    document.getElementById('interior').style.width = "100px";
    document.getElementById('interior').style.marginLeft = "50px";
    document.getElementById('interior').style.marginTop = "50px";
    var myinterval = setInterval(frame, 8);
}