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

css, html, webkit

Solution

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

Problem

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

Original source