1

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?

AsGoodAsItGets
  • 2,886
  • 34
  • 49
  • you cannot use calc() inside media query (or container query) – Temani Afif Feb 27 '23 at 19:51
  • @TemaniAfif for media queries it seems to be browser-dependent, doesn't seem to be a straight no: https://stackoverflow.com/a/23675934/134120 Given that container queries are brand new, maybe one can hope? :) – AsGoodAsItGets Feb 27 '23 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 Feb 27 '23 at 20:09
  • @TemaniAfif looks like you're right. Oh well, I'll have to find another way then... – AsGoodAsItGets Feb 27 '23 at 23:34

0 Answers0