Just quick example:

Here is how we often use container queries for responsive layouts:

.card {
  container: card / inline-size;
}

.inner-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

@container card (width < 300px) {
  .inner-wrapper {
      grid-template-columns: 1fr;
  }
}

But let’s imagine that we need to do something, if our card will be too tall, for example, create fog fade:

@container card (height > 200px) {
  .inner-wrapper {
    max-height: 200px;
    overflow: auto;
    mask-image: linear-gradient(to top, transparent, #000 30%, #000)
  }
}

It won’t work, because we use inline-size as a type of container card. But if we’ll change the type to size, we must use certain height for the container (but we don’t actually know, what height it would be on the page, because content is different, and we just want to the safe our cards of oversize, and hide the content, and show some additional ui elements, etc.)

Aren’t all elements’ position static by default though?