put scroll bar outside div with auto overflow

css, html

Solution

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/).

Problem

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> ```

Original source