JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div id="outer" style="height:150px;width:150px">
    <div id="inner" style="height:150px;width:150px"></div>
</div>
<button onclick="clickit(1);">bigger</button>
<button onclick="clickit(2);">smaller</button>
<button onclick="clickit(3);">reset</button>

CSS

#outer{
    height: 150px; width: 150px;
    max-width:200px; max-height:200px;
    overflow:auto;
}
#inner {
    background-image: url('//lorempixel.com/200/200');
}

JavaScript

window.clickit = function (mode){
    switch(mode){
        case 1:
            outer.style.height='250px';
            outer.style.width='250px';
            inner.style.height='250px';
            inner.style.width='250px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 2:
            outer.style.height='100px';
            outer.style.width='100px';
            inner.style.height='100px';
            inner.style.width='100px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 3:
            outer.style.height='150px';
            outer.style.width='150px';
            inner.style.height='150px';
            inner.style.width='150px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
    }
}
function fixScroll() { outer.style.overflow = 'auto'; }