Calc（）输出意外值

Question

我想做的是通过#grid使height #grid的{​​{1}} width的160％，但看来{{1 }}被视为视口宽度的百分比，而不是像素值。

calc(var(--grid-item-width) * 1.6)的高度远大于其宽度的160％，如下面的屏幕截图所示。

--grid-item-width

当我将#grid的值打印到控制台时，它返回: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 */ } ，这显然无济于事。

关于MDN上的--grid-item-width的注释之一：

  

在自动和固定布局表中涉及表列，表列组，表行，表行组和表单元格的宽度和高度百分比的数学表达式可能会被视为已指定auto。

这是为什么calc(100% - calc( 26px * 4))在这种情况下会有意外的输出吗？

Answer 1

这两个表达式都是相同的，但它们将解析为相同的值，因为它们应用于不同的属性。

因此，将calc(100% - calc(var(--gap) * 4))与height一起使用意味着我们采用了 100％的父级高度（包含块），并删除了4个间隙。

将calc(100% - calc(var(--gap) * 4))与grid-auto-columns一起使用意味着我们占用了元素宽度的 100％，并且我们删除了4个间隙。如果您的元素是代码中唯一的元素，那么它将是整个屏幕的宽度，因此您将最终使用屏幕的宽度。

具有相同值的唯一方法是确保父级的高度与元素的宽度相同，或者避免使用百分比值，并且依赖会在两种情况下以相同方式解析的不同单位（{ {1}}，px，vw，vh等）

---

请注意，如果存在no height set on the parent element.，则与height一起使用的值可能无法em