JSFiddle - React, Tailwind, and code Playground

HTML

<h1>CSS Exapand attribute proposal</h1>
<p>Resize the blue container. <a href="https://github.com/w3c/csswg-drafts/issues/6718" target="_blank">Click here for further information</a></p>
<div class="box" style="width: 300px; height: 300px">
  <div class="circle"></div>
</div>
<div class="box" style="width: 150px; height: 300px">
  <div class="circle"></div>
</div>
<div class="box" style="width: 300px; height: 150px">
  <div class="circle"></div>
</div>

CSS

.box{
  display: inline-block;
  vertical-align: top;
  border:1px dashed blue;
  min-width:100px;
  min-height:100px;
  resize: both;
  overflow: hidden;
  background-color:#e0ecff;  
  padding:10px;
}

.circle {
  aspect-ratio: 1;
  max-height: 100%;
  max-width: 100%;
  border-radius: 500px;
  animation: colorAnimation 5s infinite;
  border: 2px dashed rgba(0,0,0,0.5);
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes colorAnimation {
  0%   {background:red;}
  50%  {background:yellow;}
  100%   {background:red;}
}

body{
  padding:30px;
  font-family: Helvetica, Arial;
}

body *{
  box-sizing:border-box;
}