stop scroll bar from covering div content with auto overflow

css, html

Solution

This could be a solution: http://jsfiddle.net/ZUYVe/5/

Basically, it uses a wrapper to contain the scrollbar

<div class="scroll">
  <div>a
    <br />b
    <br />c
    <br />d
    <br />
  </div>
</div>

and leaves some space on the right side for it:

padding-right: 13px;

However, since scrollbars may vary depending on OS, I'd suggest to use custom scrollbars like this jQuery plugin.

Problem

I have this div with `overflow-y:auto;` which can be very narrow and when the scroll bar appears it can cover much or all of the div. I would like the scroll bar to appear outside the div like with `overflow:scroll;` but I don't want to see the faded scroll bar when there is no overflow. Also I don't want to give the div a width as the width must be variable. This jsfiddle demonstrates my issue, and here is the code: ``` .auto { display:inline-block; border:1px solid green; height:70px; overflow-y:auto; } <div class = "auto"> <div> a<br> b<br> c<br> d<br> </div> </div> ```

Original source