使用calc()中的分数(fr)给出"无效的属性值"

Question

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

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

因为我希望它是两个分数,但删除50px,因为它用于填充等.但是,在执行此操作时,Chrome会说:"无效的属性值".

不能calc()用于分数,或者我在这里做错了什么？

Answer 1

一个fr单元是不是一个标准的长度,等百分比或像素.它只代表剩余的空间.

因此,fr不能在calc()表达式中使用.

§7.2.3.灵活长度:fr 单位

灵活长度是fr单位的维度,表示网格容器中剩余空间的一小部分.

fr单位不是长度,因此无法用calc()表达式表示.

但你真的需要calc()在第一时间吗？

fr仅适用于剩余空间,这是在真实长度之后留下的空间,例如宽度,边界,边距和填充已被考虑在内.

考虑单独使用fr.否则,发布问题的完整示例.