网格显示内的长宽比在 Chrome 和 Firefox 中的工作方式不同

Question

在 Firefox 中使用网格布局并设置某些子项的宽高比无法正确计算，该列不会展开并且子项与该列重叠。

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

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

}

https://jsfiddle.net/qsuten2L/3/

这在 Chrome 和 Firefox 中的工作方式有所不同。

Chrome 中的行为正是我想要的

Answer 1

Chrome 和 FF 现在都可以识别容器查询和关联的单元。

此代码片段不会尝试设置高度，而是将宽度设置为 100cqh（容器高度）。

<style>
  .parent {
    width: 300px;
    height: 100px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    container-type: size;
  }

  .image {
    width: 100cqh;
    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;

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