Why doesn’t min() (or max()) work with unitless 0?

by

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?

More Related Contents:

  1. How to prevent Less from trying to compile CSS calc() properties?
  2. How do I debug CSS calc() value?
  3. Disable LESS-CSS Overwriting calc() [duplicate]
  4. Why the CSS calc() function is not working? [duplicate]
  5. Sass Variable in CSS calc() function
  6. CSS Calc alternative
  7. calc() not working within media queries
  8. Using calc() with tables
  9. Using modulus in css calc function
  10. CSS not applying on multiple instances of a custom control
  11. How can I center an absolutely positioned element in a div?
  12. CSS media query to target only iOS devices [duplicate]
  13. How to set up fixed width for ?
  14. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  15. Sass Invalid CSS Error: “expected expression”
  16. Google chrome a:visited background image not working
  17. Flex auto margin not working in IE10/11
  18. CSS3 transform order matters: rightmost operation first
  19. Zebra striping a table with hidden rows using CSS3?
  20. How to make the overflow CSS property work with hidden as value
  21. CSS3 combining selectors with OR instead of AND
  22. What’s the difference between inline styles vs classes?
  23. What is the difference between `margin` and `padding` in CSS?
  24. Can I apply a CSS transition to the overflow property?
  25. How to change the scrollbar color using css [duplicate]
  26. Mysterious whitespace in between Bootstrap2 Navbar and row underneath
  27. How to apply border radius in IE8 and below IE8 browsers?
  28. Center fixed div with dynamic width (CSS)
  29. How to use images in css with Webpack
  30. SASS calculate HSL Difference between 2 colours

Leave a Comment