填充阻止元素渲染，Chrome v75中的Flexbox错误

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的计算方式有关，但这只是一个假设。

此外，我注意到一种奇怪的特质，如果打开开发人员控制台，问题似乎会自行解决。

有人知道这是怎么回事吗？