溢出-y：如果overflow-x设置为hidden，则可见触发固定位置元素内的垂直滚动条

Question

有人可以向我解释为什么浏览器会为“overflow-y: visible”元素呈现滚动条，如果它位于固定位置的父级内部吗？请注意，仅当父级具有“overflow-x：hidden”时才会发生这种情况。如果overflow-x未设置为隐藏，则overflow-y: visible不会显示滚动条，这是预期的行为。

下面是一个jsfiddle示例，其中我希望左右div都呈现相同，但它们不会。有没有办法让左框渲染像右边的那样没有在包装div上设置高度并删除包装器中隐藏的overflow-x？

http://jsfiddle.net/A2gJ4/2/

CSS和HTML：

.wrapper {
  position: fixed;
  border: solid 1px #ccc;
  width: 250px;
  height: auto;
  top: 10px;
  overflow-x: hidden;
}

.wrapper p.absolute {
  position: absolute;
}

.wrapper.first {
  overflow-y: visible;  
  left: 10px;
}

.wrapper.second {
  overflow: visible;
  left: 280px;
}

<div class="wrapper first">
  <p>Content that is not positioned</p>
  <p class="absolute">Content is absolute positioned</p>
</div>

<div class="wrapper second">
  <p>Content that is not positioned</p>
  <p class="absolute">Content is absolute positioned</p>
</div>