put scroll bar outside div with auto overflow - html

Question

I have a small div with overflow:auto; but when the the scroll bar appears it covers up a great deal of the div. This can be avoided by using overflow:scroll;, but then you get the unsightly faded scroll bar when there is no overflow. Is there a way of putting the scroll bar outside of the div without using overflow:scroll;? Thanks.
here is a demonstration jsfiddle
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
}
<div class = "alphabet">abcdefgh<br>
ijklmnop<br>
qrstuvwx
</div>

Answer 1

If it's an option to use a container element around .alphabet, you can set the vertical scroll on that. I've added the <hr> to fake an always-visible bottom border that won't also go under the scrollbar.
HTML:
<div class="container">
<div class="alphabet">
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
</div>
</div>
<hr>
CSS:
.container{
overflow-y:auto;
overflow-x:hidden;
height:50px;
width:100px;
}
.alphabet{
width:100%;
overflow:visible;
box-sizing:border-box;
border:1px solid;
border-bottom:0;
}
hr{
margin:0;
height:0;
width:85px;
border:0;
border-bottom:1px solid;
}
With inner border: http://jsfiddle.net/Q32gG/1/
If you don't actually care about the scrollbar showing inside the border, you can drop the <hr> and add a full border to .container instead (http://jsfiddle.net/V3MbV/3/).

Answer 2

Instead of using and outside-scrollbar, why not to use some right padding as so
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
padding-right:15px;
}
Or if you prefer, using em units to match a character whatever size you are using
padding-right:1em;
PD: By the way there is a typo in your example. The period should be previous it should be .alphabet {

Answer 3

You can also use a combination of padding right and setting the width to 100% + 10px. Works like a charm.
.alphabet {
width: 100%;
box-sizing: border-box;
border: 1px solid;
border-bottom: 0;
// for outside scrollbar
width: calc(100% + 10px);
overflow-y: auto;
padding-right: 10px;
}