0

Background

It is a known problem that divs sticking out beyond the viewport width cause a horizontal scrollbar on the <html> element. This is especially frustrating when using width: 100vw while a vertical scrollbar is active. See e.g. Prevent 100vw from creating horizontal scroll

Observation

I now noticed that this problem only appears on one side/direction!

If the overflow:auto container has direction: ltr;, then elements sticking out to the right will cause a scrollbar, whereas elements sticking out to the left are "cut off" as with overflow: hidden;.

If the overflow:auto container has direction: rtl;, then elements sticking out to the left will cause a scrollbar, whereas elements sticking out to the right are "cut off" as with overflow: hidden;.

I tested this with Brave (=Chromium) on Linux, and Firefox on Linux.

.scrollbox {
  margin: 10px;
  overflow-x: auto;
}
.direction-rtl {
  direction: rtl;
}
.stick-out-left {
  border: 10px dotted blue;
  background: lightgreen;
  /* Change this to margin-right -> no scrollbar.. */
  margin-left: -10px;
}
.stick-out-right {
  border: 10px dotted blue;
  background: lightgreen;
  /* Change this to margin-right -> no scrollbar.. */
  margin-right: -10px;
}
<div class="scrollbox">
  <div class="stick-out-left">
  this div is sticking out to the left, causing no scrollbar.
  </div>
</div>
<div class="scrollbox">
  <div class="stick-out-right">
  this div is sticking out to the right, causing a scrollbar.
  </div>
</div>
<div class="scrollbox direction-rtl">
  <div class="stick-out-left">
  this div is sticking out to the left inside an rtl container, causing a scrollbar.
  </div>
</div>

Questions

Is this behavior consistent across browsers?

Is there some spec definition or theory to explain this behavior?

EDIT: To clarify: I am not looking for a solution to a specific problem. I am looking for an explanation for the behavior I see in the code snippet above. Why is one side cut off, and the other gives me a scrollbar?

donquixote
  • 4,877
  • 3
  • 31
  • 54

1 Answers1

0

thats because you dont use any width for your div. try this:

 .scrollbox {
  margin: 10px;
  overflow-x: auto;
}
.direction-rtl {
  direction: rtl;
}
.stick-out-left {
  width: 100vw;
  border: 10px dotted blue;
  background: lightgreen;
  /* Change this to margin-right -> no scrollbar.. */
  margin-left: -10px;
}
.stick-out-right {
  border: 10px dotted blue;
  background: lightgreen;
  /* Change this to margin-right -> no scrollbar.. */
  margin-right: -10px;
}
Mohammad Mohammadi
  • 305
  • 4
  • 11
  • 1
    Thanks for the answer! But how does this explain how the behavior is always applied to one side only? – donquixote May 09 '21 at 14:02
  • I think you must use direction. – Mohammad Mohammadi May 09 '21 at 14:05
  • 1
    Hi. I added an "EDIT" to my question, I hope it makes things more clear. I am not trying to "fix" anything in my code, I just want to understand browser behavior. The code examples are intentionally crafted like this to cause a specific browser behavior. – donquixote May 09 '21 at 14:17
  • Unfortunately Browser have different behavior in 'rtl' and 'ltr' direction. you'll see very different of this errors and sure you must Fix theme. – Mohammad Mohammadi May 09 '21 at 14:22