CSS转换：为什么当内部元素较小时滚动条可见？

请看

因为在转换后，内部div在视觉上比其包装器小，所以我认为滚动条将不可见

此外，它在Chrome和IE之间的行为不同。在IE11中，x和y滚动条都可见，但在Chrome中只有y滚动条可见

将鼠标悬停在内部div上，即可按预期工作

我想实现的是：在IE和Chrome中都没有可见的滚动条，直到您将鼠标悬停在内部分区上。这可能吗？Thx.

快速解决方案可能是：

.scale { 
    width: 400px; height: 300px;
    background-color: red; 
    transform: scale(0.4);
    transform-origin: 0 0; transition: all 0.5s ease-in-out;
    overflow: hidden;

}

---

初始状态具有垂直滚动条的原因是，内部DIV（.scale）的高度大于外部DIV（.wrapper）：

.wrapper{
宽度：200px；
高度：200px；/*可能相关：它可能仅适用于IE。在Chrome中，为什么它只有垂直滚动而没有水平滚动，即使内部div中的宽度和高度都较大？
.scale { 
    width: 400px; height: 300px;
    background-color: red; 
    transform: scale(0.4);
    transform-origin: 0 0; transition: all 0.5s ease-in-out;
    overflow: hidden;

.scale:hover { 
    transform: scale(4); 
    overflow: scroll;
}

.wrapper { 
  width: 200px; 
  height: 200px; /* <---- */
  padding: 10px;
  border: 1px solid #888; overflow: auto;
}
.scale { 
  width: 400px; 
  height: 300px;  /* <---- */
  background-color: red; 
  transform: scale(0.4);
  transform-origin: 0 0; transition: all 0.5s ease-in-out;
}