Padding предотвращает рендеринг элемента, ошибка Flexbox в Chrome v75

Question

Возможно, вам придется дважды нажать кнопку «Выполнить фрагмент кода», чтобы демонстрационные программы по какой-то причине работали должным образом.

У меня возникла проблема в Chrome версии 75, в результате чего при добавлении paddingэлементу header предотвращает рендеринг последнего дочернего элемента в контейнере main, даже если он все еще существует на странице.

В приведенном ниже примере, как только вы прокрутите до нижней частиmain обратите внимание, что <p>z</p> не отображается или не отображается.

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>

Теперь, если мы удалим padding в header, элемент начнет отображаться или визуализироваться снова.

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>

Я предполагаю, что это как-то связано с тем, как вычисляется неявное height из header, но это всего лишь предположение.

Кроме того, я заметил странную идиосинкразию, при которой проблема, казалось бы, решалась сама собой, если бы консоль разработчика была открыта.

Кто-нибудь знает, что здесь происходит?