12

I've searched around for an answer to this, but couldn't find any useful information. I'm trying to set the top property of an element in CSS to max(0, 120vh - 271px). I've tried several variations of this:

  • top: max(0, 120vh - 271px);
  • top: max(0, (120vh - 271px));
  • top: max(0, calc(120vh - 271px));

Is there something wrong with my syntax? I keep getting Chrome telling me that this is an invalid property error.

Invalid property error as shown in Chrome

In practice, I'm actually using CSS variables for the numbers. so 120vh is actually var(--height) or something like that. When I use CSS variables, the line just doesn't do anything. It doesn't apply the style, and I don't get any warnings. What am I doing wrong here?

I'm using the newest version of Chrome (83 I believe), so this should be supported.

Jaden Baptista
  • 656
  • 5
  • 16
  • @TemaniAfif The CSS variables aren't part of the issue, as far as I can tell, because of the image in the original post. It's not working with straightforward numbers/units either. The variables are defined as the units in the picture: `max(0 [no unit], 120vh [viewport height] - 271px [this is in pixels])`. Also, why is the last line of CSS better? Max is supposed to support calculations directly without needing calc. – Jaden Baptista Jun 22 '20 at 20:51
  • I don't believe this is a duplicate, because the other questions are asking about calc() and clamp(). Of course the answer is the same, but the questions aren't. Temani's answer is catered to this question, as it includes the spec specifically for min and max. – Jaden Baptista Jul 30 '22 at 01:45
  • don't worry about the duplicate. it doesn't answer the question, It's only related but the core issue is different because we can use 0 inside min()/max() in some cases where the element accept unite-less value like opacity. `opacity:min(0,2)` is valid but 0 inside a formula will never be valid – Temani Afif Aug 03 '22 at 19:31

1 Answers1

17

You need to add a unit to 0 otherwise it's confusing for the browser to handle the comparison between a uniteless value (a <number>) and a value with unit (a <length>) and the top property accept a <length> not a <number>

top: max(0px, 120vh - 271px)

To understand this, you need to follow the specification:

The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.

Then for calculations:

A calc() function contains a single calculation which is a sequence of values interspersed with operators, and possibly grouped by parentheses (matching the <calc-sum> grammar),

So the content of min()/max() is treated like the one of calc() then from the type checking

A math function can be many possible types, such as <length>, <number>, etc., depending on the calculations it contains, as defined below. It can be used anywhere a value of that type is allowed.

and

Note: Altho there are a few properties in which a bare <number> becomes a <length> at used-value time (specifically, line-height and tab-size), <number>s never become "length-like" in calc(). They always stay as <number>s.

You may get surprised but using top:0 is valid while top:min(0) or top:max(0) is not. To make them valid you need to add the unit.

But you can use opacity: min(0) for example since opacity accept a number as argument.

Worth to note that the same also apply to clamp() since it's equivalent to max(MIN, min(VAL, MAX))

Related: Why doesn't css-calc() work when using 0 inside the equation?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • What if unitless is an actual value? I wanted to use 1.5 as my value. This is different than 1.5em (the em makes it relative to parent's font size, 1.5 without unit means 1.5 times the current font size). – Kerry Johnson Dec 28 '21 at 19:40
  • @KerryJohnson it depends on the property. 1.5 means "1.5 the font-size" only when applied to line-height. 1.5 alone has no meaning so all depend on your case – Temani Afif Dec 28 '21 at 19:43
  • Thanks for your response. I am trying to apply it to line-height. It would be nice if min(), max(), and clamp() would take into account the property context (i.e. min() is applied to line-height, therefore use unitless line-height) but I guess these functions exist in a separately layer without considering these nuances. I wonder if there is a bug report on this or if this is designed that way. "1.5 the font-size" is a valid form of measurement for line-height so I think it's a bug. – Kerry Johnson Dec 28 '21 at 19:51
  • @KerryJohnson it does take into account the property. In the answer, I am not saying that uniteless is not allowed. I am saying that the comparison between a uniteless value and a value with unit is not possible. You can do `min(1.2,0)` and it works fine (you will get 0). You may consider asking a question by adding your code and context to get accurate answers. min()/max() are more surprising than what you may think. – Temani Afif Dec 28 '21 at 19:55
  • I tried `min(1.5, 1.25rem)` and it crosses it out in inspector (which you did say "I am saying that the comparison between a uniteless value and a value with unit is not possible"). If they both resolve to a computed px value why should that not work for line-height? Is it spec gray area? – Kerry Johnson Dec 29 '21 at 07:35