aspect-ratio sets "preferable" sizes, but does not force the size

CSS Box Sizing Module Level 4:

This property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

Aspect ratio will be ignored in cases of content overflow (when overflow is not hidden or auto) or in flex elements.

.awesome-box {
  width: 150px;
  aspect-ratio: 1;
}

But aspect-ratio can be forced by setting:

• min-height to 0
• or, as it was written above, by setting overflow explicitly

.awesome-box {
  width: 150px;
  aspect-ratio: 1;
  min-height: 0;
}

---

Source: habr.