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

1

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

answered May 23, 2022 at 13:37

Pierre Demessence

5163 silver badges15 bronze badges

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

Comments

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

1

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.

answered May 23, 2022 at 13:45

Jack

2201 silver badge8 bronze badges

Collectives™ on Stack Overflow

Understanding css calc() function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related