CSS Grid template with image breaks Firefox

Question

I have two lines of text on top of another, each using different font-sizes. To the left of these text lines, I would like to display an image, automatically scaled in width and height to fit the height of both of these text lines combined, while keeping the original aspect ratio.

I am using css grid trying to achieve this. It does work in chrome, but in firefox, it breaks.

Chrome:

Firefox:

As you can see, firefox fails to properly adjust the image grid area to fit the images size.

How could this be fixed?

The relevant code can be found here: Jsfiddle: https://jsfiddle.net/5z6grjp2/

.parent {
  width: 200px;
  display: grid;
  border: 1px solid #000;
  grid-template-columns: auto 1fr;
  grid-template-areas: "image textA" "image textB";
}

.image {
  grid-area: image;
  height: 100%;
}

.textA {
  font-size: 20px;
  background-color: #f99;
  grid-area: textA;
}

.textB {
  font-size: 15px;
  background-color: #9f9;
  grid-area: textB;
}

<div class="parent">
  <img class="image" src="/archer.png">
  <div class="textA">Text A</div>
  <div class="textB">Text B</div>
</div>

Answer 1

This looks like a bug in Firefox.

The layout renders with the image at its inherent size. The sibling items, sizing to 1fr, don't use the actual remaining space. They use the space available when the image was rendered at its original size. So there's an overlap when the image expands. That's what appears to be happening.

The workaround is to force the image area to expand. A fixed width does this, although I know it may not be what you want.

.parent {
  width: 200px;
  display: grid;
  border: 1px solid #000;
  grid-template-columns: auto 1fr;
  grid-template-areas: "image textA" "image textB";
}

.image {
  grid-area: image;
  width: 40px;
  height: auto;
}

.textA {
  grid-area: textA;
  font-size: 20px;
  background-color: #f99;
}

.textB {
  grid-area: textB;
  font-size: 15px;
  background-color: #9f9;
}

<div class="parent">
  <img class="image" src="http://hordes.io/data/archer.png">
  <div class="textA">Text A</div>
  <div class="textB">Text B</div>
</div>

jsFiddle demo