JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Overflow: Clip
    </title>
<script>

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";
}
</script>
</head>
<body>
    <div id="target">
        <div id="interior"></div>
    </div>
<br />
<a href="#" onClick="shrinkInterior();return false;">How does "clip" behave? Click here to find out.</a>

<script>
target = document.getElementById('target');
console.log(target.scrollWidth);
console.log(target.scrollHeight);
</script>

</body>
</html>

CSS

div {border: 1px solid black;}
#target {
  width: 200px;
  height: 200px;
  overflow: clip;
  background: url('https://i.stack.imgur.com/spmUM.gif');
  -webkit-animation: gradientBG 15s ease infinite;
	        animation: gradientBG 15s ease infinite;
}

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

@-webkit-keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}