title: Different width on webkit scrollbars
body: <p><strong>Problem</strong></p>
  
  <p>I have two divs with overflow scrollbars. Both have the same width. Still, they get different width. </p>
  
  <p>It's a CSS problem but I added some JS. It makes it possible to drag the bottom scrollbar to affect the top scrollbar.</p>
  
  <p>I only expect it to work with webkit browsers like Chrome.</p>
  
  <p>Jsfiddle: <a href="http://jsfiddle.net/jedrga5w/3/" rel="nofollow">http://jsfiddle.net/jedrga5w/3/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="mmt"&gt;
      &lt;div class="mmt-scrollbar"&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mmt-cropped"&gt;
          &lt;div&gt;Content2&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.mmt-cropped {
      height: 200px;
      background: #eee;
  }
  .mmt-cropped,
  .mmt-scrollbar {
      overflow-x: auto;
      width: 532px;
  }
  
  .mmt-cropped div,
  .mmt-scrollbar div {
     width: 770px;
  }
  
  .mmt-cropped::-webkit-scrollbar,
  .mmt-scrollbar::-webkit-scrollbar {
      -webkit-appearance: none;
  }
  
  .mmt-cropped::-webkit-scrollbar:horizontal,
  .mmt-scrollbar::-webkit-scrollbar:horizontal {
      height: 11px;
  }
  
  .mmt-cropped::-webkit-scrollbar-thumb,
  .mmt-scrollbar::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid white;
      background-color: rgba(0, 0, 0, .2);
  }
  
  .mmt-cropped::-webkit-scrollbar-track,
  .mmt-scrollbar::-webkit-scrollbar-track { 
      background-color: #fff; 
      border-radius: 8px; 
  }
  
  .mmt-scrollbar,
  .mmt-scrollbar div {
      height: 11px;
  }
  </code></pre>
  
  <p><strong>JS - Not required</strong></p>
  
  <p>Just to connect the bottom scroll to the top scoll. Not required but it makes it easier to spot the problem.</p>
  
  <pre><code>jQuery(window).load(function($) {
      $('.mmt-cropped').scroll(function(){
           $('.mmt-scrollbar').scrollLeft( $('.mmt-cropped').scrollLeft() );
      });
  });
  </code></pre>