CSS - Überlauf-y Scroll Makes X-Achsen Verborgene

Question

Diese fiddle einen Behälter mit mehreren Elementen in der es zeigt:

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

Jedes Element hat ein weißes Rechteck als Element pseudo darüber erscheint.

Warum sind sie an der X-Achse des Containers abgeschnitten? Warum beeinflusst overflow-y: scroll die x-Achse?

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. Ich habe herausgefunden warum. Hier sind einige Links:

stackoverflow ,
W3

so ziemlich sein, weil, wenn eine der x oder y ist auf etwas anderes als sichtbar ... dann das Gegenteil (auch sichtbar) wird automatisch eingestellt zu auto:

"Berechneter Wert: wie angegeben, außer mit sichtbarem Computing auto wenn einer der Überlauf-x-Überlauf oder y-nicht sichtbar ist"

---

JSFIDDLE

//left: -30px; 

Ich bin nicht 100% auf, warum Sie aus seinem Schnitt denken. Die Boxen wurden nach links verschoben ... Wenn Sie also fragen, warum die linke Seite der Boxen nicht ihre Grenze zeigt ... deshalb. Diese Geige hat die Linke auskommentiert. Bitte klären Sie, ob ich Ihre Frage falsch verstanden habe.