html - 阻止图像与屏幕重叠，导致出现滚动条

Question

阻止图像与屏幕重叠，导致出现滚动条。

应该是这样的

https://jsfiddle.net/Luudbo02/1/

<section class="sec1">
Hello
</section>
<section class="sec2">
  <div class="sec2-1">
    Image
 </div>

.sec1{
background: #ccc;
padding:20px;  
z-index: 9999999;
border: 1px solid black;
}
.sec2{
position: relative;
height: 200px;
padding: 10px;
border: 1px solid black;
}
.sec2-1{
transform: scale(1.2);
background: red;
position: relative;
border: 1px solid black;
text-align: center;
}

Answer 1

将属性 overflow: hidden 添加到 .sec2。