calc-size()
Published on
The calc-size() function value allows you to do calculations on the intrinsic size of an element.
The syntax of it is a little bit strange, where we have to provide it which intrinsic value we want to do out calculations on, and then provide it the calculation itself… it’s hard to describe, so here’s an example:
button {
width: calc-size(auto, size + 1rem);
}This might seem a little strange, but it could be useful for declaring a height:
section.hero {
height: calc-size(auto, size + 10vb);
align-content: center;
}As an added bonus, it allows us to animate and transition to these intrinsic calculations as well!
See the Pen calc-size() - example 3 by Kevin (@kevinpowell) on CodePen.
However, if you are only going to be animating or transitioning to a size without needing to do a calculation on it, it is best to use interpolate-size: allow-keywords instead.
Browser support
As of the time of writing, browser support for calc-size() is limited to Chromium browsers. You can find an up to date support table here.