CODEWITHSUNDEEP
cssspecifications
shennan
shennan

Reputation: 11656

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

Consider this CSS:

min-height: none;
max-width: none;
max-width: auto;
min-height: auto;

This yields the following 'Invalid property value' errors.

enter image description here

Why is it that 'unsetting' min-[prop] requires the auto value while unsetting max-[prop] requires the none value?

I'm intrigued by the rationale behind this decision in the spec.

Upvotes: 4

Views: 3034

Answers (3)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

I think there is some logic behind this as the element has to have a minimal height even if this height is zero.

Conversely, the use of none in regard to max-height is logical, there are (in theory) an infinite amount of values that it can be as the element can use as much height as necessary.

In the words of the spec:

none

(Only on 'max-height') No limit on the height of the box.

Minimum and maximum heights: 'min-height' and 'max-height'

There is no limit to the maximum height of the box it can be as big as it wants, but there is a limit to the minimum height of the box as it can only go down to zero (negative height values are not valid).

In CSS 2.1 the initial value of min-height was 0, the flexbox module introduced auto as the initial value. The reason why auto works is that it computes to 0 (if the flexbox model is not in use) effectively unsetting the value:

auto

On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0 (unless otherwise defined by a future specification).

Implied Minimum Size of Flex Items

Upvotes: 1

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

Actually default value for min-height and min-width is 0.

auto and none have not the same meaning:

For max-[prop], none is: no limit on the height/width of the box, it grows as long as it can. It's not an automatic. It literally has no limit, none.

For min-[prop], auto is: "The default minimum size for flex items, providing a more reasonable default than 0 for other layouts". What is: min(0, x), where x >= 0 and x is minimum size "acceptable element without having overflow". It is an automatic adjust.

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371113

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:

Upvotes: 1

Related Questions