Fit child div with `aspect-ratio` to parent in Firefox

Question

It's 2021 and aspect-ratio is supported in all modern browsers. Several years ago someone asked a question about how to fill a parent while maintaining an aspect ratio, however the sole answer that mentioned aspect-ratio produces an incorrect result in Firefox.

What is the correct way to expand an element to fit its parent while contrained to its aspect-ratio property? The result I desire is exactly what was shown in that other question:

Here is a non-working starter snippet, see how it breaks when the parent is made wider:

#parent {
  display: grid;
  place-content: center;
  
  width: 100px;
  height: 150px;
  resize: both;
  overflow: auto;
  border: 2px solid black;
}

#child {
  aspect-ratio: 1 / 1;

  background: yellow;
  border: 2px solid orange;
}

<div id="parent">
  <div id="child">I should be an expanding square!</div>
</div>