title: Overflow-y: auto without changing the content padding when the scrollbar appears
body: <p>I am trying to create a content container that doesn't change the content position when overflow causes a scrollbar to appear. I can do this easily when my containers are fixed widths but I am struggling to think of a way where I can use percentages to scale to the browser width. I am using an extra container with a negative right margin so the scroll bar appears in the padding of the parent container.</p>
  <p>How can I make the content div stay the same width as the header div? I either need to be able to create a variable with the width of the header and use it for the width of content or have some sort of css that targets a container that has overflow-y enabled.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const chars = 'abcdefghijklmnopqrstuzwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  
  const contentContainer = document.getElementsByClassName('content')[0];
  
  function addContent(num) {
    for (let i = 0; i &lt; num; i++) {
      contentContainer.innerHTML += chars[Math.floor(chars.length * Math.random())] + ' ';
    }
  }
  
  addContent(150);
  
  document.getElementById('add').addEventListener('click', function() {
    addContent(1500);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    height: 100px;
    border: 1px solid black;
    padding: 20px;
  }
  
  .header {
    background-color: #eee;
    padding: 10px;
  }
  
  .scrollbar {
    margin-right: -20px;
    height: 100%;
    overflow-y: auto;
  }
  
  .content {
    padding-right: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;&lt;/div&gt;
    &lt;div class="scrollbar"&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="add"&gt;Add scrollbar&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>