为什么在CSS网格中使用fr单位会导致Chrome中出现这种现象？

Question

我正在尝试使用网格，但是在chrome中发现了这种奇怪的行为。看看这个小提琴，尝试更改视口https://jsfiddle.net/16Ltw04d/4/

的高度

html, body {
  height: 100%;
}

.grid {
  outline: 1px solid red;
  height: 100%;
  display: grid;
  grid-template-areas: 'main';
  grid-template-rows: 1fr;
}

.main {
  outline: 1px solid green;
  grid-area: main;
  margin: auto;
  min-width: 200px;
  min-height: 200px;
}

如果您调整窗口高度的大小，则内部div将在不同位置重新绘制时迅速向上和向下跳跃。它在Firefox中工作正常。我是在做一些不正确的操作，还是Chrome的错误？