JSFiddle - React, Tailwind, and code Playground

HTML

Expectation: (div with "overflow: auto;" and fixed height/width should produce scrollbars enabling user to scroll to see full content.)

Reality: When a css3 transform is applied the browser apparently loses ability to judge child content dimensions.

<b>Reference <span>(No xform applied, user can scroll to the full bounds of the image)</span></b>
<div><img src="http://realitypod.com/wp-content/uploads/2010/07/pillars-of-creation.jpg"  /></div>


<b>Smaller <span>(Scale to 50%, Non-sensical scrollbars present, Image is off in the whitespace somewhere)</span></b>
<div class="smaller"><img src="http://realitypod.com/wp-content/uploads/2010/07/pillars-of-creation.jpg"  /></div>

<b>Large <span>(Scale to 200%, scrollbars cannot reach bounds of image, clipping occurs)</span></b>
<div class="larger"><img src="http://realitypod.com/wp-content/uploads/2010/07/pillars-of-creation.jpg"  /></div>

<b>Rotated<span>(rotate 90 deg, scrollbars to long in the horizontal, not long enough in vertical, clipping occurs)</span></b>
<div class="rotated"><img src="http://realitypod.com/wp-content/uploads/2010/07/pillars-of-creation.jpg"  /></div>

CSS

b{ display: block; padding-top: 20px;}
b > span { font-weight: normal; color: #444; }
div { 
    overflow: auto; 
    width: 600px;height:300px; 
    text-align: center; 
}
div.smaller img { 
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    border: solid 1px #F00;
}
div.larger img {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    border: solid 1px #F00;
}

div.rotated img {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    border: solid 1px #F00;
}