title: CSS: remove padding created by scroll
body: <p>I'm trying to build a UI similar to Apple Mail, when left bar has horizontal list of emails through which you can scroll. The problem is that when I add a scroll, it's creating an additional padding instead of being rendered on top of the content.</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-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html style="height: 100%;"&gt;
  &lt;head&gt;
  &lt;style&gt;
  .scrollable-list-item {
    padding: 1rem;
    border-bottom: 1px solid #cdcdcd;
  }
  .scrollable-list-item-active {
    background-color: #0069d9;
    color: white;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="height: 100%; width: 100%; margin: 0"&gt;
    &lt;div style="height: 100%; width: 100%; display: flex;"&gt;
        &lt;div style="width: 200px; height: 100%; overflow-x: scroll; background-color: #efefef;"&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item scrollable-list-item-active"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
            &lt;div class="scrollable-list-item"&gt;scrollable list item&lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;content&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Without scroll:</p>
  <p><a href="https://i.stack.imgur.com/l973Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l973Y.png" alt="enter image description here" /></a></p>
  <p>With scroll:</p>
  <p><a href="https://i.stack.imgur.com/8cUzI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8cUzI.png" alt="enter image description here" /></a></p>
  <p>What is the proper way to add scroll without adding a blank area around it? Thank you!</p>