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-18 00:36:47Z

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.

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?
share your full code, I can probably find a way depending on your situation
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!!!

Collectives™ on Stack Overflow

Calc() outputting unexpected value

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related