title: Overflow hidden scroll-y cutting off content
body: <p>I've pasted the code below. It appears that the addition of the title element causes content to be cut-off from the bottom of the scroll. If I remove the title element, no content is cut off. The title shuffles down and impacts the next element.</p>
  <p><a href="https://i.stack.imgur.com/7olsG.png" rel="nofollow noreferrer">Screenshot here</a></p>
  <p>HTML</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;div class=&quot;title&quot;&gt;
      Title
    &lt;/div&gt;
    &lt;div class=&quot;content&quot;&gt;
      Some long content here...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre class="lang-css prettyprint-override"><code>.wrapper {
    border: 0;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
  }
  
  .title {
    text-align: center;
    color: white;
    padding: 5px 0;
    position: relative;
    margin: 0;
    background: #000;
  }
  
  .content {
    overflow-y: auto;
    height: 100%;
  }
  </code></pre>
  <p>If a box shadow and border radius is added to the wrapper element, this causes further strange behaviour (if overflow hidden removed from wrapper as well).</p>
  <p><a href="https://i.stack.imgur.com/7xPxK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7xPxK.png" alt="with box shadow and border radius" /></a></p>