title: Combination of auto overflow and top property causes weird scroll
body: <p>I'd like some help understanding why this happens.</p>
  
  <p>When <code>.item</code>'s <code>top</code> property is set to 170px, the scrolling is all messed up because of <code>overflow: auto</code>. However, if I use <code>margin-top</code> instead of <code>top</code>, the scrolling works as I'd expect it.</p>
  
  <p>Why does this happen and what are the steps to take to remedy the scrolling weirdness when using <code>top</code> instead of <code>margin-top</code>?</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-css lang-css prettyprint-override"><code>.container {
    width: 100vw;
    min-height: 100vh;
    background-color: #aa0000;
    overflow: auto;
  }
  
  .item {
    width: 200px;
    min-height: 1000px;
    position: relative;
    margin: 0 auto;
    background-color: #aaaa00;
    top: 170px;
    /*VS*/
    /*margin-top: 170px*/
  }
  
  .footer {
    height: 200px;
    background-color: #212121;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="item"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/ccioanca/pen/KvQeVw" rel="nofollow noreferrer">View on CodePen</a></p>