A powerful container query

While working with CSS carousels, I needed a solution that could adapt the position of the scroll buttons to be either inside or outside based on the available space.

I'm using anchoring to pin the buttons wherever I want, and when they're outside, there's potential for them to be off screen or out of bounds.

The solution? #

Use calc() inside the container query:

.carousel {
  …
  
  &::scroll-button(right),
  &::scroll-button(left) {
    position-area: var(--_outer);
  }
  
  /* inner positioned arrows when carousel 
     is full width of viewport or container 
     note: 120px is both arrows plus their margins
  */
  @container (inline-size >= calc(100cqi - 120px)) {
    &::scroll-button(right),
    &::scroll-button(left) {
      position-area: var(--_inner);
    }
  }
}

The default anchored position is outside the carousel, but when the carousel (inline-size) is as wide (>=) as it's nearest container 100cqi (which might be the viewport), then move the arrows safely inside.

calc(100cqi - 120px) is the size of the carousel's nearest container minus the combined size of the scroll buttons.

Pretty sweet how much this can do in one line of CSS.