stop scroll bar from covering div content with auto overflow

Question

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>

Answer 1

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.

Answer 2

Give 18px padding right to .auto class it will be help you.

   .auto   {
       border:1px solid green;
       height:70px; 
       overflow-y:auto; 
       display:inline-block;
       padding-right:18px;
      }