Minmax Fails (Invalid Property Value)

minmax fails (invalid property value)

When using auto-fill or auto-fit, there must be a definite min-size or max-size.

By "definite", the spec means:

A size that can be determined without measuring content.

^{https://www.w3.org/TR/css-sizing-3/#definite}

When you set both minmax arguments to content-based size, like this:

grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));

... that's a violation of the spec because there is no definite size.

Using min-content and max-content would result in the same error for the same reason.

As long as one value is definite, and the first value is not fr (see below), the rule is valid.

7.2.2.2. Repeat-to-fill: auto-fill and auto-fit
repetitions

When auto-fill is given as the repetition number, if the grid
container has a definite size or max size in the relevant axis, then the number of repetitions is the
largest possible positive integer that does not cause the grid to
overflow its grid container (treating each track as its max track
sizing function if that is definite or as its minimum track sizing
function otherwise, and taking grid-gap into account).

If any number of repetitions would overflow, then 1 repetition.

Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement.

Otherwise, the specified track list repeats only once.

Why unsetting max and min width/height css properties require different values?

The none value only applies to max-height / max-width. This is because there is no limit on the height / width of the box. Hence, the default value for these properties is none.

The none value is not permitted on min-height / min-width because boxes cannot have negative height / width. Hence, the default value for these properties is 0.

Spec references:

• 10.4 Minimum and maximum widths: min-width and max-width
• 10.7 Minimum and maximum heights: min-height and max-height

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

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?

Java validation @min @max annotion for null values

For optional integer values, you may use Integer instead of int, since an int variable cannot be null and will have 0 as a default value.
With an Integer, length will be null by default and you should be able to pass the validation.

CSS fr / fractional units minimum too large

This rule won't work.

grid-template-columns: repeat(auto-fit, 1fr)

The problem is explained here: minmax fails (invalid property value)

---

This rule won't work:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

The problem is explained here: minmax() defaulting to max

---

Related Topics