在使用calc()函数中使用分数（fr）会显示“无效的属性值”。

Question

13

我正在尝试在使用CSS Grid时对一些宽度应用calc()。所以我正在尝试的一个方法是这样的：

grid-template-columns: calc(1fr - 50px) calc(1fr - 50px);

我希望将其变成两个分数，但要减去50px，因为那是用来填充等的。然而，在这样做时，Chrome会显示："无效的属性值"。

calc()不能用于分数吗？还是我在这里做错了什么？

- Denver Dang

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

fr单位不像百分比或像素那样是标准长度单位，它仅代表剩余空间。

因此，在calc()表达式中不能使用fr。

§ 7.2.3. Flexible Lengths: the fr unit

可伸缩长度是带有fr单位的尺寸，它表示网格容器中剩余空间的一部分。

fr单位不是长度，因此不能在calc()表达式中表示。

但是，首先您真的需要使用calc()吗？

fr仅适用于剩余空间，即在考虑宽度、边框、外边距和内边距等真实尺寸后剩余的空间。

考虑只使用fr。否则，请发布一个具有问题的完整示例。