The following video shows not only when and how to use <c>calc-size()</c>, it also mixes in advice on generating timing functions for animations, sprinkles CSS variables throughout, and even uses <c>overflow: clip</c> combined with an absolutely positioned element to reveal more content without disturbing the layout. <media href="https://www.youtube.com/watch?v=WhS4xRSIjws" src="https://www.youtube.com/v/WhS4xRSIjws" source="YouTube" width="560px" author="Kevin Powell" caption="Animate and do math on things like height: auto with interpolate-size and calc-size()"> The syntax for <c>calc-size()</c> is, as Kevin says, <iq>weird</iq>; you have to pass two parameters: the first is the name of the logical size you'd like to use, while the second parameter is a formula that uses the placeholder <c>size</c>, which accepts the value of the first parameter. In a sense you are passing the argument, along with a lambda that accepts that argument. The following CSS sets the inline (horizontal in LTR and RTL) size of an element to be whatever the intrinsic size of the element would have been, given the size of its children, plus <c>3rem</c> (where <c>rem</c> is the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem" source="MDN">font size of the root element</a>). <code> inline-size: calc-size(max-content, size + 3rem); </code> This video accompanies <a href="https://12daysofweb.dev/2024/calc-size-and-interpolate-size/">Kevin's article</a> for the <a href="https://12daysofweb.dev/2024/">12 days of code 2024</a>, if you'd rather read about it, with more code examples.