Положить полосу прокрутки за пределы div с автоматическим переполнением

У меня есть маленький div с overflow:auto;, но когда появляется полоса прокрутки, он закрывает большое количество div. Этого можно избежать, используя overflow:scroll;, но затем вы получите неприглядную затухающую полосу прокрутки, когда нет переполнения. Есть ли способ поместить полосу прокрутки за пределы div без использования overflow:scroll;? Спасибо.

вот демонстрация 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>

Ответы

Ответ 1

Если это опция для использования элемента контейнера вокруг .alphabet, вы можете установить на нем вертикальную прокрутку. Я добавил <hr> для подделки всегда видимой нижней границы, которая также не будет находиться под полосой прокрутки.

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;
}

С внутренней границей: http://jsfiddle.net/Q32gG/1/

Если вы действительно не заботитесь о полосе прокрутки, отображаемой внутри границы, вы можете сбросить <hr> и добавить полную границу к .container (http://jsfiddle.net/V3MbV/3/).

Ответ 2

Вместо использования и внешней полосы прокрутки, почему бы не использовать какое-то правильное дополнение так

   .alphabet{ display:inline-block;
               overflow-y:auto; 
               overflow-x:hidden;
               border:1px solid;
               height:50;
               padding-right:15px;
             }

Или, если вы предпочитаете, используя em units для соответствия символу любого размера, который вы используете

padding-right:1em;

PD: Кстати, в вашем примере есть опечатка. Период должен быть прежним, он должен быть .alphabet {