How to prevent a webkit-scrollbar from pushing over the contents of a div?

Question

I'm using webkit-scrollbar and am running into styling issues as the webkit scrollbar is pushing the contents of a div to the left which causes the contents to overflow.

Notice

• 1st box uses the default browser scrollbar and does not overflow (good)
• 2nd box uses the webkit scrollbar which ends up breaking the layout. (bad/problem)

http://jsfiddle.net/ryeah/1/

Any ideas what I'm doing wrong with webkit scrollbar to cause the div to/overflow. How can we fix the 2nd box? Thanks

Webkit Scrollbar Code:

.box2::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px;
}
.box2::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 1px 1px 1px 6px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
.box2::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}
.box2::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 4px;
}
.box2::-webkit-scrollbar-corner {
    background: transparent;
}

Answer 1

Did you try putting overflow-y:overlay in the parent div? It works for me in chrome. This page says it works in safari, too.

Answer 2

Hm.. I can't think of a way to get the webkit scrollbar in overlay. One solution to stop the line breaking is to hide the scrollbar with

.box2::-webkit-scrollbar {   height: 16px;   overflow: visible;   width: 16px;   display: none; } 

other you can set the width of your UL to the same as the box so it makes use of the overflow function and displays under the scrollbar

.box ul {   width: 149px; } 

Answer 3

This is how I made it work on Chrome, and not break Firefox:

overflow: scroll;
overflow-x: hidden;
overflow-y: overlay;

I mean, the scroll bar is still taking width space on Firefox, but at least it's still showing and working.

By just doing overflow-y: overlay;, I was fixing Chrome and breaking my Firefox scroll.