Calc() 输出意外值

Question

我想做的是通过calc(var(--grid-item-width) * 1.6) 将#grid height 设为#grid width 的160%，但似乎--grid-item-width 被视为视口宽度的百分比而不是像素值。

#grid 的高度远大于其宽度的 160%，如下面的屏幕截图所示。

: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 */
}

当我将--grid-item-width 的值打印到控制台时，它返回calc(100% - calc( 26px * 4))，这显然没有帮助。

MDN 上关于calc() 的注释之一指出：

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

这就是为什么calc(var(--grid-item-width) * 1.6) 在这种情况下会有意外的输出吗？

Answer 1

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

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

将calc(100% - calc(var(--gap) * 4)) 与grid-auto-columns 一起使用意味着我们采用100% 的元素宽度 并移除4 个间隙。如果您的元素是代码中唯一的元素，那么它将是全屏宽度，因此您将使用屏幕宽度结束。

获得相同值的唯一方法是确保父元素的高度与元素的宽度相同，或者避免使用百分比值并依赖在两种情况下以相同方式解析的不同单位（@ 987654326@,vw,vh,em等)

---

请注意，如果有no height set on the parent element.，则与高度一起使用的值可能会失败auto