title: How to prevent a webkit-scrollbar from pushing over the contents of a div?
body: <p>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.</p>
  
  <p>Notice</p>
  
  <ul>
  <li>1st box uses the default browser scrollbar and does not overflow (good)</li>
  <li>2nd box uses the webkit scrollbar which ends up breaking the layout. (bad/problem)</li>
  </ul>
  
  <p><a href="http://jsfiddle.net/ryeah/1/">http://jsfiddle.net/ryeah/1/</a></p>
  
  <p>Any ideas what I'm doing wrong with webkit scrollbar to cause the div to/overflow. How can we fix the 2nd box? Thanks</p>
  
  <p><strong>Webkit Scrollbar Code:</strong></p>
  
  <pre><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;
  }
  </code></pre>