calc() with CSS property inside CSS container query doesn't seem to work

Question

I have the following CSS:

:root {
    --some-number: 0;
}

.header-nav {
    container: header-nav-container / size;
}

@container header-nav-container (width < calc(400px + (var(--some-number) * 100px))) {
    .header-nav-menu__label {
        display: none;
    }
}

The code above, and specifically the dynamic width calculation doesn't seem to work as expected. If I replace the calc() above with simply 400px the container query works fine, but of course it's not dynamic anymore.

I tested the width calculation separately by setting it on the width property of another element, and the calculation itself seems to work fine, even when the some-number property increases.

What am I missing? Can we not use calc() inside container queries?

you cannot use calc() inside media query (or container query) — Temani Afif
– Temani Afif, Commented Feb 27, 2023 at 19:51
@TemaniAfif for media queries it seems to be browser-dependent, doesn't seem to be a straight no: stackoverflow.com/a/23675934/134120 Given that container queries are brand new, maybe one can hope? :) — AsGoodAsItGets
– AsGoodAsItGets, Commented Feb 27, 2023 at 20:02
I meant CSS variables not calc(). calc() may work with static values but with variables I don't think so because we cannot resolve it. — Temani Afif
– Temani Afif, Commented Feb 27, 2023 at 20:09
@TemaniAfif looks like you're right. Oh well, I'll have to find another way then... — AsGoodAsItGets
– AsGoodAsItGets, Commented Feb 27, 2023 at 23:34

Dan B · Accepted Answer · 2025-09-08 18:11:37Z

0

It appears you can now use calc() inside media and container queries but you can't use variables (CSS custom properties).

I couldn't do exactly what I wanted:

@container (min-width: calc((2 * var(--item-width)) + var(--gap-between-items))) {
  /* ... */
}

But I confirmed that calc() does indeed work:

@container (min-width: calc((2 * 18rem) + 2rem)) {
  /* ... */
}

Though not ideal, I was able to much more cleanly do what I wanted.

edited Sep 8 at 18:11

answered Sep 8 at 18:02

Dan B

4115 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AsGoodAsItGets Sep 9 at 14:50

That was already the case 2 years ago when I asked the question, you can read the comments above.

Collectives™ on Stack Overflow

calc() with CSS property inside CSS container query doesn't seem to work

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related