JSFiddle - React, Tailwind, and code Playground

by david

HTML

<p>
flexbox
</p>

<div style="display: flex;">
  <!-- Chrome and spec say final width is 50px. Firefox says 100px. -->
  <div style="background: blue; height: 100px; aspect-ratio: 1/2; ">
    <div style="width: 100px;"></div>
  </div>
</div>

<br>
<p>
block
</p>
<!-- Everyone agrees final width is 100px -->
<div style="background: blue; height: 100px; aspect-ratio: 1/2; ">
  <div style="width: 100px;"></div>
</div>