通过在flexbox中使用aptive-ratio的奇怪布局

Question

dl 是flexbox， dd 是一些内容的盒子。

dt 与 dd 相同，其内容宽度等于IT高度。

---

一个奇怪的结果是，当页面首次加载时， dt 的宽度不正确。

但是在回流后运行良好。发生在Chrome和Firefox中。

我不知道这是浏览器错误还是使用不正确。

section {
 display: inline-block;
 max-width: 100%;
 margin-right: 10px;
}

dl {
 display: flex;
 gap: 0 5px;
 background: #ddd;
 border-radius: 0 10px 10px 0;
 padding-right: 10px;
 margin: 0;
}
dt {
 flex: 0 0 auto;
 width: fit-content;
}
dd {
 margin: 0;
 flex: 1 1 auto;
}
.tag {
 height: 100%;
 background: #0ff;
 aspect-ratio: 1;
}

<section>
 <dl>
  <dt>
   <div class="tag">Test1</div>
  </dt>
  <dd>
   <p>Description 11111</p>
   <p>Description 22222</p>
  </dd>
 </dl>
</section>

<section>
 <dl>
  <dt>
   <div class="tag">Test2</div>
  </dt>
  <dd>
   <p>Description 11111</p>
  </dd>
 </dl>
</section>

codepen