8

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;
     }
  }
}
Omri Aharon
  • 16,959
  • 5
  • 40
  • 58

1 Answers1

4

***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.

Community
  • 1
  • 1
carinlynchin
  • 389
  • 1
  • 3
  • 13
  • The boxes are wider than you think. If you remove the `overflow-y: scroll` you'll see it. They're not just small. – Omri Aharon Jul 20 '16 at 16:11
  • this was what you asked : "Why are they cut off at the x-axis of the container? Why is overflow-y: scroll affecting the x axis?" I don't see anything affecting the x-axis besides the boxes being moved to the left... I'm using chrome tho, not sure maybe you are on a different browser? – carinlynchin Jul 28 '16 at 10:27
  • I'm using Chrome. Not sure you understood the question. My point in only doing `overflow-y` (as opposed to just `overflow`) was that I want to boxes to be cut off when going over the boundaries of top/bottom. For some reason that I don't understand, they're not visible when they go over the left/right sides. – Omri Aharon Jul 28 '16 at 12:11
  • I deliberately moved them to the left so you can see that the container cuts them in the middle, whereas I expect them to be visible beyond it. – Omri Aharon Jul 28 '16 at 12:12
  • ah ok.. i understand now. you want them to be displayed even if they are over to the left/right... ok let me look at it again – carinlynchin Aug 01 '16 at 20:11
  • ok. I found out why. Here are some links: [stackoverflow](http://stackoverflow.com/questions/10903084/overflow-x-visible-doesnt-work-with-overflow-y-auto-any-workaround) , [W3](https://www.w3.org/TR/2016/WD-css-overflow-3-20160531/#overflow-properties) 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"** – carinlynchin Aug 01 '16 at 21:48
  • Yeah I read it as well, but in that case how do I achieve my desired effect? – Omri Aharon Aug 02 '16 at 10:09
  • And why does auto mean "hidden" ? – Omri Aharon Aug 02 '16 at 10:19
  • I don't think you will be able to do it as is. You will have to make some structural changes to achieve what you want. Here is some more info. http://stackoverflow.com/questions/8919903/overflow-y-auto-and-overflow-x-visible-in-the-same-time – carinlynchin Aug 08 '16 at 16:54