JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="inner-container">
        <div class="foo"></div>
    </div>
</div>

CSS

.container {
    position: relative;
    border: 1px solid black;
    margin: 20px;
    width: 200px;
    height: 50px;
    overflow: hidden;
}
.inner-container {
    position: relative;
    margin: -25px;
}
.foo {
    position: absolute;
    top: 0; 
    left: 0;
    width: 200px;
    height: 50px;
    background-color: #667eea;
    transform: translateX(15px) translateY(15px);
}

JavaScript

function getVisibleDimensions(node, referenceNode) {
	referenceNode = referenceNode || node.parentNode;
    
	var pos = node.getBoundingClientRect();
	var referencePos = referenceNode.getBoundingClientRect();
    
	return {
    	"width": Math.min(
        	node.clientWidth,
        	referencePos.left + referenceNode.clientWidth - pos.left, 
            node.clientWidth - (referencePos.left - pos.left)
        ),
        "height": Math.min(
        	node.clientHeight, 
        	referencePos.top + referenceNode.clientHeight - pos.top,
            node.clientHeight - (referencePos.top - pos.top)
        )
    }
}

console.log(getVisibleDimensions(document.querySelector(".foo"), document.querySelector(".container")));