带有图像的CSS网格模板打破了Firefox

Question

我有两行文字在另一行上面，每行使用不同的字体大小。 在这些文本行的左侧，我想显示一个图像，在宽度和高度上自动缩放以适合这两个文本行的组合高度，同时保持原始高宽比。

我正在使用css网格来实现这一目标。它确实在chrome中工作，但在firefox中，它会中断。

铬：

火狐：

如您所见，firefox无法正确调整图像网格区域以适合图像大小。

如何解决这个问题？

相关代码可在此处找到： Jsfiddle：https://jsfiddle.net/5z6grjp2/

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这看起来像是Firefox中的一个错误。

布局呈现图像的固有大小。调整为1fr的兄弟项目不使用实际剩余空间。当图像以原始大小渲染时，它们使用可用空间。因此，当图像扩展时会出现重叠。这似乎正在发生。

解决方法是强制图像区域扩展。固定宽度可以做到这一点，虽然我知道它可能不是你想要的。

.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