Grid布局内aspect-ratio在Chrome与Firefox中表现不一致问题

在使用Grid布局时，为跨多行的子元素设置aspect-ratio后，Firefox会出现列宽计算异常：第一列未被元素撑开，导致右侧文本元素与左侧元素重叠，而Chrome的表现符合预期。

问题代码 #

HTML #

<div class="parent">
    <div class="image"></div>
    <div class="textA">Text A</div>
    <div class="textB">Text B</div>
</div>

CSS #

.parent{
  width: 300px;
  height: 100px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}

.image{
  height:100%;
  aspect-ratio: 1;
  background-color: blue;
  grid-row: span 2 / span 2;
}

.textA{
  font-size:1.5rem;
  background-color: gold;
}

.textB{
  font-size:1rem;
  background-color: violet;
}

原因分析 #

Firefox在处理Grid布局的auto列宽时，对于同时设置height:100%、aspect-ratio:1且跨多行的元素，无法正确通过纵横比反推元素宽度，导致auto列未被撑开；而Chrome会根据元素的高度和纵横比计算出实际宽度，进而确定列宽。

解决方案 #

以下两种方法均可修复Firefox的兼容问题：

方法1：替换auto列为min-content #

修改父元素的grid-template-columns，用min-content替代auto，让Firefox正确计算元素的最小宽度：

.parent{
  grid-template-columns: min-content 1fr;
}

方法2：给图片元素设置width: min-content #

直接给.image添加width: min-content，配合原有的auto列定义：

.image{
  height:100%;
  aspect-ratio: 1;
  width: min-content;
  background-color: blue;
  grid-row: span 2;
}

两种方案都能让Firefox和Chrome表现一致：左侧蓝色元素撑开第一列，右侧文本元素正常排列在右侧区域。

内容的提问来源于stack exchange，提问作者mvinicius2k