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


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

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

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:

<ol><li>Why it happens so, why scrollbar doesn't appear (it works fine with symmetric layout on the right side)?</li> <li>Is it ever possible to make it appear and scroll to the left ?</li> <li>

Am I missing anything very basic about scrollbars?

Demo fiddle

</li> </ol>

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:


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.

</li> <li>

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; 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 <em>is</em> 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>

</li> <li>

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.

</li> </ol>

Hope that helps answer your questions.


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

Working Fiddle


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.

<pre class="snippet-code-css lang-css prettyprint-override">body { overflow: auto; direction: rtl; } #test { position: absolute; height: 100px; width: 100px; left:-50px; background-color: lime; } <pre class="snippet-code-html lang-html prettyprint-override"><div id="test"></div>

You should be follow this css code

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



  • Is it possible to overload ++ operators in Python?
  • App Launched from Safari Displays: Do you want to allow this page to open “(null)”?
  • Get the user who clicked on the button in the spreadsheet
  • YTPlayerView: Remove Share Button in top right corner
  • Fixing tabs to the top of the page, but underneath the header
  • getting exception when inserting events in android calendar
  • Why do I need an infinite loop in STM32 programming?
  • magento 2 rest api : get cart items with images
  • apache zeppelin is started but there is connection error in localhost:8080
  • Multithread python requests [duplicate]
  • Azure NodeJS Error: ENOENT, open 'D:\\home\\site\\wwwroot\\bin\\views\\'
  • Jenkins - could not read Username for 'https://github.com': No such device or address
  • Videos won't upload
  • How to move to lines with the same indentation in Visual Studio Code
  • Failed to resolve: firebase-auth-15.0.0 [closed]
  • How do I change the names of buttons on a message box?
  • In metro, get all inherited classes of an (abstract) class?
  • Google TV VideoView playing YouTube rtsp videos
  • Defer unused CSS
  • Sample deviceQuery cuda program
  • Modifying native query cannot have named parameter bindings?
  • Set initial vuetify v-select value
  • Swift manually rotate view controller
  • How to resolve this in PHPUnit where it is asking me to set KERNEL_DIR in my phpunit.xml?
  • Swift: UIView.animate works unexpectedly
  • Ajax call on Multiple selection in Select box
  • Dynamic XML Schema Validates Subsection of Document
  • Typeahead.js does give me suggestions but doesn't select them
  • Content-Type alternative in MQTT
  • how to get the location(lat/lng) on google maps v3 from the location(x,y)
  • How to turn off notice reporting in xampp?
  • how to run ejabberd with Erlang on Heroku?
  • how to snap two objects in runtime in unity?
  • Android: Unable to detect vertical plane
  • Send array to next viewcontroller iOs xcode [duplicate]
  • Debug `Unexpected end of JSON input Error` on content script
  • Apple Mach-O Linker error (“duplicate symbol”)
  • Call Microservice from another Microservice within Docker
  • Sign a Pdf using custom digital signature in Java
  • Angular FormGroup won't update it's value immediately after patchValue or setValue