html - stop scroll bar from covering div content with auto overflow -

i have div overflow-y:auto; can narrow , when scroll bar appears can cover or of div. scroll bar appear outside div overflow:scroll; don't want see faded scroll bar when there no overflow. don't want give div width width must variable. jsfiddle demonstrates issue, , here 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> 

this solution: http://jsfiddle.net/zuyve/5/

basically, uses wrapper contain scrollbar

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

and leaves space on right side it:

padding-right: 13px; 

however, since scrollbars may vary depending on os, i'd suggest use custom scrollbars this jquery plugin.