A strange layout by using aspect-ratio in flexbox

Question

The dl is flexbox, dd is a box of some content.

The dt is expected the same height with dd, and its content width is equal to it height.

---

A strange result is when the page first loaded, the width of dt isn't correct.

But it works well after a reflow. Happened both in Chrome and Firefox.

I don't know whether it's a browser bug or usage incorrect.

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