title: Scrollbar overlaps content of fixed div
body: <p>I have a fixed div (a shopping cart list) on the right side. If there are too many items, a scroll bar appears. The problem is, it partially covers the fixed div. How can I make the div push left when the scroll bar appears so it won't be covered?</p>
  
  <p><img src="https://i.stack.imgur.com/zXyTt.png" alt="Scollbar Problem"></p>
  
  <p>My CSS:</p>
  
  <pre><code>/* sidebar-right */
  #sidebar-wrapper-right {
      margin-left: -250px;
      right: 0;
      width: 250px;
      background: #F5F5F5;
      position: fixed;
      height: 100%;
      overflow-y: auto;
      z-index: 1000;
      top: 60px;
  }
  
  .sidebar-nav-right {
      position: absolute;
      top: 0;
      width: 250px;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .sidebar-nav-right li {
      line-height: 40px;
      text-indent: 20px;
  }
  
  .sidebar-nav-right li a {
      color: #555;
      display: block;
      text-decoration: none;
  }
  
  .sidebar-nav-right li a .item-count {
      margin-top: 10px;
      padding-left: 0;
      margin-right: 5px;
  }
  
  .sidebar-nav-right li a:hover {
      color: #000;
      background: rgba(255,255,255,0.8);
      text-decoration: none;
  }
  
  .sidebar-nav-right &gt; .sidebar-brand {
      height: 65px;
      line-height: 60px;
      font-size: 18px;
  }
  
  .sidebar-nav-right &gt; .sidebar-brand a {
      color: #000;
  }
  
  .sidebar-nav-right &gt; .sidebar-brand a:hover {
      color: #fff;
      background: none;
  }
  
  #sidebar-wrapper-right .sidebar-nav-right .sidebar-right-trash {
      display: inline;
      margin-right: -10px;
      top: 12px;
  }
  
  #sidebar-wrapper-right .sidebar-nav-right .sidebar-right-trash:hover {
      background: none;
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div id="sidebar-wrapper-right"&gt;
      &lt;ul class="sidebar-nav-right"&gt;
          &lt;li class="sidebar-brand"&gt;[Shopping Cart]&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"&gt;&lt;/a&gt;
              &lt;a href="market/#"&gt;[X] &lt;span class="badge pull-right item-count"&gt;5&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"&gt;&lt;/a&gt;
              &lt;a href="market/#"&gt;[X] &lt;span class="badge pull-right item-count"&gt;10&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"&gt;&lt;/a&gt;
              &lt;a href="market/#"&gt;[X] &lt;span class="badge pull-right item-count"&gt;10&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"&gt;&lt;/a&gt;
              &lt;a href="market/#"&gt;[X] &lt;span class="badge pull-right item-count"&gt;10&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"&gt;&lt;/a&gt;
              &lt;a href="market/#"&gt;[X] &lt;span class="badge pull-right item-count"&gt;10&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"&gt;&lt;/a&gt;
              &lt;a href="market/#"&gt;[X] &lt;span class="badge pull-right item-count"&gt;10&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"&gt;&lt;/a&gt;
              &lt;a href="market/#"&gt;[X] &lt;span class="badge pull-right item-count"&gt;10&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;hr class="sidebar-seperator"&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>