CSS - Overflow-y Scroll Makes X-Axis Hidden

Question

This fiddle demonstrates a container with several elements inside of it:

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

Each element has a white rectangle as a pseudo element appearing over it.

Why are they cut off at the x-axis of the container? Why is overflow-y: scroll affecting the x axis?

Brevity 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

***UPDATE****

ok. I found out why. Here are some links:

stackoverflow ,
W3

pretty much its because if one of the x or y is set to anything other than visible... then the opposite (even visible) is automatically set to auto:

"Computed value: as specified, except with visible computing to auto if one of overflow-x or overflow-y is not visible"

---

JSFIDDLE

 //left: -30px;

I'm not 100% on why you think its cut off. The boxes were moved to the left...so if you are asking why the left side of the boxes aren't showing their border...that is why. This fiddle has the left commented out. Please clarify if I have my understanding of your question wrong.