CSS rule not working (width: auto)

Question

I put within my css file the following rule :

.navbar-form .select2-container ul.select2-choices,
.navbar-form .select2-container ul.select2-choices .select2-search-field input {
  max-width: auto !important;
}

Unfortunately, the rule is barred and in addition of that, this message was displayed :

Invalid property value

In brief, what value can I put ?

Answer 1

Here are the valid values

none
- The width has no maximum value.

length
- See length for possible units.

percentage
- Specified as a percentage of containing block's width.

Src: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

Answer 2

Max-width cannot be set to "auto". See here , and scroll down to valid Property Values. For max-width, these include:

none : No maximum width (the default)

length : Define maximum width in px, cm, etc.

percent(%) : Define maximum width in percent of the containing block.

initial : Sets the property to its default/initial value.

Typically, max-width can be used together with a width property. So you can say "I want my div.container to have width:100%; , but I also want to 'cap' that width at 1024px, by also setting max-width:1024px; ."

This is especially useful for controlling your styles across different devices/breakpoints.