css一个容器设置overflow-x:hidden后他的Y轴方向就会出现滚动条？

Question

<div class="d1">
<div class="d3">
<div class="d2">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>2<br/>3<br/>
</div>
</div>
</div>
.d1{
  width:200px;height:150px;
  overflow-x:hidden;
  background:red;position:relative;
  }
.d1 .d2{
  width:300px;height:300px;background:blue;
  position:absolute;
}
.d3{
  width:200px;height:150px;
  overflow-y:visible;
  background:red;position:relative;
}

想实现一个效果是一个容器.d1当里面的东西超出x轴方向把他隐藏掉，超出y轴方向正常显示，
但是给.d1设置了overflow-x:hidden后他的Y轴方向就会出现滚动条，我想是不是y轴没有设置显示的原因就设置
了overflow-y：visible;但还是没有，查了sf的问题说是双overflow的bug，我就定义了一个.d3,给她设置了overflow-y：visible;还是不行,不知道是什么原因造成的？

Answer 1

把overflow-y:viseble换成overflow-y:hidden试一试。

Answer 2

你没有设置overflow-y:hidden;同时内部元素d2的高度超出了d3，那么当然会出现y轴的滚动条了。