Horizontal scrollbar appears with overflow content on right but not on left?

Question

I have an element with position: absolute in body with some part of it to the left from left side.

Demo fiddle

* {
  overflow: visible;
}

#test {
  position: absolute;
  height: 100px;
  width: 100px;
  left: -50px;
  background-color: lime;
}

<div id="test"></div>

I expect that horizontal scrollbar should appear allowing to scroll the document to the hidden part of the element, but it doesn't. So, I have some questions about the case:

1. Why it happens so, why scrollbar doesn't appear (it works fine with symmetric layout on the right side)?
2. Is it ever possible to make it appear and scroll to the left ?
3. Am I missing anything very basic about scrollbars?

Answer 1

In order to have scrollbars appear, the parent element must have a set width. For horizontal scrollbars using the property overflow-x:scroll; on the parent will make the scrollbar appear.

Sounds similar to this issue: Div with horizontal scrolling only

To try and answer your questions:

1. The scrollbar appears when you use right: -50px because the standard flow of a HTML document is left to right. The CSS pushed the #test div out and the browser is able to continuing rendering to the right. It may look like part of the div is outwith the body at this point but it is not. Everything visible on an HTML page must be within the body.

2. Using the CSS display: rtl; on a parent container or the body would make the scrollbars scroll left instead of right, however if you did this to the body the whole document would now work right to left, changing all positioning in the page. I'd suggest having a parent element with the CSS property display: rtl;.

#parent {
  position: static;
  height: 100px;
  width: 100px;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: red;
  direction: rtl;
}

#test {
  width: 100px;
  height: 100px;
  background-color: lime;
  position: relative;
  left: -50px;
}

<div id="parent">
  <div id="test">
  </div>
</div>

Of course this means the #parent element is always fully visible. If this was not wanted then the alternative is to set the direction:rtl; but ensure any content you want displayed correctly is then in a wrapper div which has CSS direction: ltr; to resume normal flow:

body {
  direction: rtl;
  overflow: scroll;
}

#allOtherContent {
  direction: ltr;
  width: 100%;
  background-color: red;
}

#test {
  width: 100px;
  height: 100px;
  background-color: lime;
  position: absolute;
  left: -50px;
}

<div id="test"></div>
<div id="allOtherContent"></div>

3. Scrollbars appear when elements within another element are too big to fit. For this to work the browser needs to know the exact size of the parent element to determine that the test element is too big, and therefore needs to scroll.

In my example the #parent has a width of 100px, the same as the #test div, however the #test div has been pushed left 50px relative to #parent and therefore the #test div now requires 150px of space. The parent now has overflowing content and the CSS overflow-x:scroll; adds our horizontal scrollbar.

More on how overflow and scrollbars work can be found here: https://developer.mozilla.org/en/docs/Web/CSS/overflow.

Hope that helps answer your questions.

Answer 2

Adding overflow-x: scroll; to the #test div will give you a horizontal scrollbar.

Working Fiddle

Answer 3

You should be follow this css code

*{
  overflow: visible;
}
#test{
  position: absolute;
  height: 100px;
  width: 100px;
  overflow-y:scroll;
  left: -50px;
  background-color: lime;
}

Answer 4

You need to change the direction from left to right (default) to right to left in the scrollable div.

direction: rtl;

This behaviour is due to the CSS direction property.

The direction property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.

That is why it is working when the negative value is in the right rather than the left because the flow goes from left to right (ltr) and the negative right makes the scrollable area adapt.

body {
  overflow: auto;
  direction: rtl;
}

#test {
  position: absolute;
  height: 100px;
  width: 100px;
  left:-50px;
  background-color: lime;
}

<div id="test"></div>