CSS height mysteries: Different on Chrome and Firefox

This codepen looks different on Chrome than on Firefox. The html and css is:

<div class="outer">
  <div>header</div>
  <div class="grid">
    <div class="central">central</div>
  </div>
</div>

.outer {
  min-height: 200px;
  
  background: lightsalmon;
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  flex: 1 1 0%;
}

.central {
  /*height: 98%;*/
  background: lightcoral;
}

On Chrome, even though the central element's height is always relative to the intermediate elements actual height (when placed with grid or when using a percentage height like the one in comments), but only if is grandparent's height was explicitly set (and even though that height is not what the central element's is calculated in relation to).

(Grid layout seems to have no such issue: If you change the outer element's display from flex to grid it works on Chrome too.)

Is this a bug or is the behaviour not clearly enough defined?

I can't say I understand that I understand's Mozilla's formal definition of percentage heights on this page anyway and I don't know if there's a more rigorous definition.