html - CSS - Overflow-y 滚动使 X 轴隐藏

Question

这fiddle演示了一个包含多个元素的容器:

<div class="container">
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
</div>

每个元素都有一个白色矩形作为伪元素出现在它上面。

为什么它们在容器的 x 轴处被切断？为什么 overflow-y: scroll 会影响 x 轴？

简洁 CSS:

.container {
  position: absolute;
  overflow-y: scroll;
  height: 400px;
  width: 200px;
  border: 1px solid green;

  .element {
    height: 100px;
    padding: 10px;
    position: relative;
    margin-top: 10px;

     &::after {
       content: '';
       position: absolute;
       top: -20px;
       left: -30px;
       width: 50px;
       height: 20px;
       border: 1px solid black;
       background: white;
     }
  }
}

Answer 1

***更新****

好的。我发现了原因。以下是一些链接:

stackoverflow,
W3

几乎是因为如果 x 或 y 中的一个设置为可见以外的任何东西...那么相反的(即使是可见的)会自动设置为自动:

“计算值:如指定的那样，如果 overflow-x 或 overflow-y 之一不可见，则可见计算除外”

---

JSFIDDLE

 //left: -30px;

我不是 100% 了解您认为它被切断的原因。盒子被移到了左边……所以如果你问为什么盒子的左边没有显示它们的边框……这就是原因。这个 fiddle 的左边被注释掉了。如果我对您的问题的理解有误，请澄清。