title: Child div is scrollable, but body's height still increases when adding content within child
body: <p>I have a <code>div</code> in my HTML page that has <code>overflow-y: scroll;</code>, and this appears to work just fine.</p>
  
  <p>But when I add content to this scrollable child, my page's <code>body</code> increases in height such that now the whole page is scrollable. But scrolling the page down shows empty background-color space.</p>
  
  <p>It's as if the <code>body</code> is allocating space for the content inside the scrollable child, despite the child being scrollable and thus not requiring the body to allocate this space.</p>
  
  <p>Is there a style property that causes this, and is there a style property (or removal of a property) that can fix it?</p>
  
  <hr>
  
  <p>EDIT:
  As a clue, my scrollable child element has <code>display: flex;</code>, and when I change it to <code>display: block;</code>, the new position it has extends exactly to the bottom of the extra space the <code>body</code> has. So it's as if the <code>body</code> is behaving as if the child <code>div</code> has <code>display: block;</code>, ignoring the it's actual <code>display</code> value.</p>