title: Extra space in a element horizontally scrolled element with relatively positioned items
body: <p>Scrolling items inside a small wrapping element is something relatively easy to do, but in my case, the items inside this overflowed container are relatively positioned so each one of them overlaps the previous.</p>
  
  <p>It's still easy, I just needed to manipulate the <code>left</code> of each element:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    overflow: auto;
    white-space:nowrap;
    width: 400px;
  }
  
  .inner {
    width: 200px;
  }
  
  .item {
    padding: 10px;
    margin-right: 20px;
    border: 1px solid red;
    display: inline-block;
    position: relative;
    vertical-align:top;
    white-space:normal;
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }
  
  .item:nth-child(odd) {
    background-color: red;
  }
  .item:nth-child(even) {
    background-color: blue;
  }
  .item:nth-child(1) { left: 0;       z-index: 1;  }
  .item:nth-child(2) { left: -30px;   z-index: 2;  }
  .item:nth-child(3) { left: -60px;   z-index: 3;  }
  .item:nth-child(4) { left: -90px;   z-index: 4;  }
  .item:nth-child(5) { left: -120px;  z-index: 5;  }
  .item:nth-child(6) { left: -150px;  z-index: 6;  }
  .item:nth-child(7) { left: -180px;  z-index: 7;  }
  .item:nth-child(8) { left: -210px;  z-index: 8;  }
  .item:nth-child(9) { left: -240px;  z-index: 9;  }
  .item:nth-child(10) { left: -270px; z-index: 10; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="inner"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I couldn't get rid of this extra space to the right that appeared right after stacking the items on top of each other.</p>
  
  <p>I can't shrink the parent — <code>.container</code> — so I tried, as you can see, shrink an inner element without success.</p>
  
  <p>How could I "trim" this space?</p>