title: Why does this div get taller when the border is removed?
body: <p>I have a <code>div.content</code> of variable height that's inside a scrollable fixed-height <code>div.content-wrapper</code>.</p>
  
  <p>I want <code>div.content</code> to be at least 1px taller than <code>div.content-wrapper</code>, so that rubberband scrolling works on iOS.</p>
  
  <p>This works well: <a href="https://jsbin.com/tonotenamo/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/tonotenamo/edit?html,css,output</a></p>
  
  <p>However, once I remove the border from <code>div.content</code>, it grows to be much taller than 1px taller than <code>div.content-wrapper</code>.</p>
  
  <p>Any ideas how to fix this?</p>
  
  <p>PS: This does not happen, when I remove <code>p { margin: 50px 0 }</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>div, p {
    margin: 0;
    padding: 0;
  }
  
  div.content-wrapper {
    height: 300px;
    overflow-y: scroll;
    background: rgb(255, 0, 0, .1);
  }
  
  div.content {
    min-height: calc(100% + 1px);
    border: 1px solid blue; // Remove this and div.content becomes too tall
  }
  
  p {
    margin: 50px 0
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>HTML:
  
  &lt;div class="content-wrapper"&gt;
    &lt;div class="content"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quod, perspiciatis similique esse consectetur voluptate veniam modi dolor deleniti amet. Sequi rerum harum ad molestias itaque culpa, dolores consequatur dignissimos.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>