Quirks mode has this percentage quirk which skips ancestors with height: auto when resolving height: <percentage>. Basically, it's resolved against the nearest ancestor in the containing block chain that doesn't have height: auto.

There are some exceptions: grid and flex containers are not skipped.

But we still have an interoperability problem: Firefox doesn't skip grid and flex items, while Chromium does. Testcase

<div style="display: flex; height: 100px; width: max-content; border: 5px solid blue">
  <div style="width: 100px; align-self: center; border: 3px solid lime">
    <div style="height: 100%; background: red"></div>
  </div>
</div>
<div style="display: grid; grid-template-rows: 100px; width: max-content; border: 5px solid blue">
  <div style="width: 100px; align-self: center; border: 3px solid lime">
    <div style="height: 100%; background: red"></div>
  </div>
</div>

I think Firefox is right and the quirk should be avoided for elements that participate in new layout models (like grid-level and flex-level boxes).

It's not just that quirks shouldn't infect new features. There is also the thing that stretched grid/flex items are considered to have a definite height, even if they have height: auto. So skipping them in that case doesn't even make sense. And skipping them depending on whether the height will end up being definite or not would just make it harder for implementations.