container size

by jpeter06

HTML

<div class="padre">
  <div class="hijo1">
  
  </div>
  <div class="hijo2">
  BB
  </div>
</div>

CSS

.html,body{padding:0;margin:0;height:100%;width:100%;background:tan;}
.padre{
  width:60vw;
  height:40vh;
  display:inline-block;
  background:red;
  container-name: card2;
  container-type: inline-size;
}
.hijo1{
  --fsize:20cqw;
  --fsize2: calc(min(20cqw, 20cqh) / 2);
  font-size:var(--fsize);
  position:absolute;
  background:gray;
  top:calc(50% - var(--fsize2));
  left:calc(50% - var(--fsize2));
}
.hijo1::after {
  counter-reset: fsize 20cqw;
  content: counter(fsize) "p";
}
.hijo2{
  font-size:3rem;
}

@container card2 (max-width: 150px) {
  .hijo1 {
    color: yellow;
  }
}
@container card2 (max-height: 20px) {
  .hijo1 {
    color: blue;
  }
}