Padding Prevents Element from Rendering, Flexbox Bug in Chrome v75

Question

You may have to hit the "Run code snippet" button twice for the demos to work as intended for some reason.

I'm experiencing an issue in Chrome version 75, whereby adding a padding to a header element prevents the last child in the main container from being rendered, even though it still exists on the page.

In the example below, once you scroll to the bottom of main notice how <p>z</p> is not visible or has not been rendered.

const
  main = document.querySelector('main'),
  header = document.querySelector('header')
let
  lastScroll = 0

main.onscroll = ()=>{
  if (main.scrollTop > lastScroll) {
    header.style.display = 'none'
  } else {
    header.style.display = ''
  }
  lastScroll = main.scrollTop
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
::-webkit-scrollbar {
  display: none;
}
header {
  padding: 12px;
  background: skyblue;
}
main {
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;
  border: solid red 3px;
}
p:last-child {
  background: green;
}

<header>HEADER</header>
<main>
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
    <p>e</p>
    <p>f</p>
    <p>g</p>
    <p>h</p>
    <p>i</p>
    <p>j</p>
    <p>k</p>
    <p>l</p>
    <p>m</p>
    <p>n</p>
    <p>o</p>
    <p>p</p>
    <p>q</p>
    <p>r</p>
    <p>s</p>
    <p>t</p>
    <p>u</p>
    <p>v</p>
    <p>w</p>
    <p>x</p>
    <p>y</p>
    <p>z</p>
  </main>

Now, if we remove the padding on header, the element begins being displayed or rendered again.

const
  main = document.querySelector('main'),
  header = document.querySelector('header')
let
  lastScroll = 0

main.onscroll = ()=>{
  if (main.scrollTop > lastScroll) {
    header.style.display = 'none'
  } else {
    header.style.display = ''
  }
  lastScroll = main.scrollTop
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
::-webkit-scrollbar {
  display: none;
}
header {
  background: skyblue;
}
main {
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;
  border: solid red 3px;
}
p:last-child {
  background: green;
}

<header>HEADER</header>
<main>
  <p>a</p>
  <p>b</p>
  <p>c</p>
  <p>d</p>
  <p>e</p>
  <p>f</p>
  <p>g</p>
  <p>h</p>
  <p>i</p>
  <p>j</p>
  <p>k</p>
  <p>l</p>
  <p>m</p>
  <p>n</p>
  <p>o</p>
  <p>p</p>
  <p>q</p>
  <p>r</p>
  <p>s</p>
  <p>t</p>
  <p>u</p>
  <p>v</p>
  <p>w</p>
  <p>x</p>
  <p>y</p>
  <p>z</p>
</main>

I assume this has something to do with how the implicit height of header is calculated, but it's just an assumption.

Also, I noticed a bizarre idiosyncrasy, whereby the problem would seemingly fix itself if the developer console was open.

Does anybody know what's going on here?