Почему использование блоков fr в сетке CSS вызывает такое поведение в 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.Я делаю что-то неправильно или это ошибка с хромом?