溢出-x可见不起作用

Question

我想要一个可以覆盖所有ht​​ml元素的“浮动”div。 我的问题是这个div可以被父节点（溢出问题）

即使通过更改项目的z-index或更改父项的overflow-x值仍然无法正常工作。 如果我删除它上面的overflow-y属性它可以工作，但我想保持overflow-y in auto。

您可以在下面看到我的代码。我希望橙色div可见。 感谢。

.container {
  display: flex;
  align-items: center;
  justify-content: center
}

.page {
  width: 350px;
  height: 350px;
  overflow-y: auto;
  overflow-x:visible;
  border: 1px solid;
  padding: 20px;
    white-space: nowrap; 

}

.pink {
  width: 200px;
  height: 550px;
  background-color: pink;
  position: relative;
}

.orange {
  width: 400px;
  height: 200px;
  background-color: orange;
  position: absolute;
  top: 150px;
  left: -100px;
  display:inline-block;
}

<div class="container" ng-app>
  <div class="page">
    <div class="pink">
      <div class="orange"> </div>
    </div>
  </div>
</div>