Calc() outputting unexpected value

Question

What I would like to do is make the #grid height 160% of the #grid width via calc(var(--grid-item-width) * 1.6), but it appears that --grid-item-width is being treated as a percentage of the viewport width instead of a pixel value.

The height of #grid is much larger than 160% of its width as can be seen in the screenshot below.

:root {
  --gap: 26px;
  --grid-item-width: calc(100% - calc(var(--gap) * 4));
}

#grid {
  width: 100%;
  height: var(--grid-item-width); /* does not match */
  overflow-x: auto;
  display: grid;
  grid-gap: var(--gap);
  grid-auto-flow: column;
  grid-auto-columns: var(--grid-item-width); /* does not match */
}

When I print the value of --grid-item-width to console, it returns calc(100% - calc( 26px * 4)), which obviously does not help.

One of the notes about calc() on MDN states:

Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.

Is this why calc(var(--grid-item-width) * 1.6) has an unexpected output in this situation?

Temani Afif · Accepted Answer · 2019-03-18T00:36:47.590

2

Both expression are the same BUT they will not resolve to the same value because they are applied to different porperties.

So using calc(100% - calc(var(--gap) * 4)) with height means that we take 100% of the parent height (containing block) and we remove 4 gaps.

Using calc(100% - calc(var(--gap) * 4)) with grid-auto-columns means that we take 100% of the element width and we remove 4 gaps. If your element is the only one on your code so it will be full screen width thus you will end using the width of the screen.

The only way to have the same value is to be sure the height of the parent is the same as the width of the element OR avoid using percentage value and rely on different unit that will resolve the same way in both cases (px,vw,vh,em,etc)

Note that the value used with height may fail to auto in case there is no height set on the parent element.

edited Mar 18 '19 at 00:36

answered Mar 18 '19 at 00:28

Temani Afif

245,468
26
309
415

ohhhhhh right. its been a long day. i can easily do what i want to do with javascript, but id prefer to use a pure CSS method if there is one. do u know of any way i can do this besides setting the `width` and `height` to the same pixel (or otherwise) value? – oldboy Mar 18 '19 at 00:31
share your full code, I can probably find a way depending on your situation – Temani Afif Mar 18 '19 at 00:32
oh you know what. i just thought of a solution. if what ur saying is correct, instead of using `100%` i can simply use `100vw`!!! – oldboy Mar 18 '19 at 00:33
@Anthony yes for example ;) – Temani Afif Mar 18 '19 at 00:35

Calc() outputting unexpected value

1 Answers1

Linked