Understanding css calc() function

Question

Heydon Pickering wrote an article about mimicking container queries. He writes that the container's CSS should be as follows:

.container { display: flex; flex-wrap: wrap; --margin: 1rem; --multiplier: calc(40rem - 100%); margin: calc(var(--margin) * -1); /* excess margin removed */ }

and the container's children's CSS should be:

.container > * { min-width: calc(33% - (var(--margin) * 2)); /* remove from both sides */ max-width: 100%; flex-grow: 1; flex-basis: calc(var(--multiplier) * 999); margin: var(--margin); }

I'm just trying to understand how the --multiplier custom property works ie where 40rem - 100% what is 100% of?

Hope that makes sense.

Pierre Demessence · Accepted Answer · 2022-05-23 13:37:02Z

A Percentage in CSS is relative to the parent.
So in this case, the calc is as follow: 40rem - 100% [of the width of the parent].

The author explains it in their post:

the calculated value will be negative if the container is 40rem or more and positive if it's narrower than 40rem.

Examples:

If the parent element is 20rem, the result will be 40rem - 20rem, so 20rem;
If the parent element is 80rem, the result will be 40rem - 80rem, so -60rem;

In the calc() function you can actually mix many units (em, vmin, %, px, etc...), in the end they will all be unit of length and thus compatible with each other

Jack · Accepted Answer · 2022-05-23 13:45:08Z

The 100% will just be in relation to whatever property the variable is being applied to.

--multiplier is just a variable, in this use case it is no different from just typing out its contents where it is being used.

So in this case:

flex-basis: calc(var(--multiplier) * 999);

is the same as

flex-basis: calc(calc(40rem - 100%) * 999);

And the 100% is in relation to the flex-basis property, and relative to the targets parent. You can read about the effect this has for flex-basis specifically in the flex-basis values section on MDN.

Collectives™ on Stack Overflow

Understanding css calc() function

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related