JSFiddle - React, Tailwind, and code Playground

HTML

<button class="button1">Scale 0.5</button>
<button class="button2">Scale 3</button>
<div class="container">
    <div class="wrapper">
        <div class="content-outer">
            <div class="content-inner">
                <div style="background-color:green; width:50px; height: 50px"></div>
            </div>
        </div>
    </div>
</div>

CSS

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.5);
    }
}
@keyframes scaleAnimation2 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(3);
    }
}
.container {
    position: relative;
    border: 3px solid red;
    width: 600px;
    height: 400px;
    background-color: blue;
    overflow-x: scroll;
    overflow-y: scroll;
}
.wrapper {
    background-color: yellow;
    width: 300px;height: 200px;
    top: 50%; left: 50%;
    margin-left: -150px;
    margin-top : -100px;
    position: absolute;
    background-color: yellow;
}
.content-outer {
    width: 300px;
    height: 200px;
    transform-origin: 50% 50%;
    /*transform-origin: 0 0;*/
}
.content-outer.animatted {
    animation: scaleAnimation 1s ease-in forwards;
}
.content-outer.animatted2 {
    animation: scaleAnimation2 1s ease-in forwards;
}
.content-inner {
    width: 300px;
    height: 200px;
    background: linear-gradient(to right, red, white);
}

JavaScript

var doScale = function (cName) {
    var contentOuterDiv = document.querySelector(".content-outer");
    contentOuterDiv.classList.add(cName);

    // reflect new width height to wrapper
    contentOuterDiv.addEventListener("animationend", function () {
        var wrapper = document.querySelector(".wrapper");
        var rect = contentOuterDiv.getBoundingClientRect();
        wrapper.style.width = rect.width + "px";
        wrapper.style.height = rect.height + "px";
        wrapper.style.marginLeft = -1* (rect.width / 2) + "px";
        wrapper.style.marginTop = -1* (rect.height / 2) + "px";
    });
};

document.querySelector(".button1").onclick = function () {
    doScale("animatted");
}
document.querySelector(".button2").onclick = function () {
    doScale("animatted2");
}