Html Chome-从高度指定的flexbox项目显示问题中删除元素

我有一个特定于chrome的问题，从指定高度的flexbox容器中移除flexbox项目的元素。这导致该容器中的另一个可滚动flexbox项目出现奇怪的显示问题。可滚动项似乎在增长时未正确刷新/重新绘制

这是一个相当具体的问题，在示例中更容易看到

注意：这并不特定于使用javascript删除元素。在DevTools中手动删除它们也会导致这种情况

<div id="container">
  <div id="box1"></div>
  <div id="box2"></div>
</div>

#container {
  height: 300px;
  display: flex;
  flex-direction: column;
}

/* Removing elements from #box1 causes display issues with box2 */
#box2 {
  overflow-y: scroll;
}

#容器{
高度：300px；
显示器：flex；
弯曲方向：立柱；
}
/*从#box1中删除元素会导致box2出现显示问题*/
#框2{
溢出y：滚动；
}

---

我希望底部的可滚动flexbox项在顶部flexbox项清空后接管整个容器。我希望容器始终保持相同的大小。

在Chrome 77中对我来说效果很好。你还能复制它吗？在Chrome 77中对我来说效果很好。你还能复制它吗？