css - 如果 child 使用 css3 Transform :Scale 烫伤，父容器不会溢出

Question

我正在研究 CSS3 转换。

parentDiv{
    overflow:scroll;
}
img{
    width:100%;
    height:auto;
}

我在一个 div 中有一个图像。 parentDiv 根据图像高度在 y 方向滚动。但是当我用 css3 缩放转换 img 时，img 宽度增加，但父 div 不在 x 方向滚动。 Jsfiddle 链接:: https://jsfiddle.net/yf48ga22/

Answer 1

不是缩放而是查看image，缩放div，其中image是为了查看在 轴即 x 和 y 上滚动。我对 html 结构 做了一些改动，只是为了理解检查这个 jsFiddle .

$(document).ready(function(){
	$("#box > .ch").css({
  	'transform' : 'scale(1.8)',
    'transition' : '1s ease'
  });
});

#box{
    overflow-x: auto;
    overflow-y: auto;
    display: flex;
    background:red;
    flex-direction: column;
}
#box > .ch{
    flex:1;
    flex-shrink: 0;
    background: #fff;
    overflow: auto;
}
#box > .ch > img{
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div class="ch">
    <img src = "https://s3-us-west-2.amazonaws.com/cbsapp/package_content/s78c_e4vt6/main_images/pg_4.jpg">
  </div>
</div>