css - 在 calc() 中使用分数 (fr) 给出 "Invalid property value"

Question

我正在尝试在使用 CSS 网格时在某些宽度上使用 calc()。所以我正在尝试的一件事是:

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

因为我希望它是两个分数，但删除 50px，因为它用于填充等。但是，在执行此操作时，Chrome 会提示:“无效的属性值”。

calc() 不能用于分数，还是我做错了什么？

Answer 1

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

因此，fr 不能用于calc() 表达式。

§ 7.2.3. Flexible Lengths: the fr unit

A flexible length is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container.

fr units are not lengths so they cannot be represented in calc() expressions.

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

fr 仅适用于剩余空间，即考虑了宽度、边框、边距和填充等真实长度后 剩余的空间。

考虑单独使用 fr。否则，发布一个完整的问题示例。