Document length-fitting on <select>

[mangelozzi]

MDN URL

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

What specific section or headline is this issue about?

The Into and "Try it"

What information was incorrect, unhelpful, or incomplete?

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

max-width overrides width, but min-width overrides max-width.

Although true a lot of the time, its not technically true all the time. The exceptions is what makes debugging code so hard. It might be worth adding a note for when this is not true, like with select inputs, width overrides max-width.

What did you expect to see?

Information to help explain why max-width is not working on a <select> input.

Do you have any supporting links, references, or citations?

https://stackoverflow.com/a/10795269/5506400

Do you have anything more you want to share?

Hope one day form controls will be more consistent with their API. Every form control has some weird quirks one has to work around.

MDN metadata

Page report details

• Folder: en-us/web/css/max-width
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/max-width/index.md
• Last commit: 7a9f9ba
• Document last modified: 2023-02-21T06:01:00.000Z

[yarusome]

For the select element, what happens is not that width overrides max-width (at least for Gecko). When a <select> has its width larger than max-width in Gecko, the selection bar will always shrink to fit max-width just like a box with overflow-x: hidden, and the dropdown menu will try to shrink to fit max-width. But if the dropdown menu has an item longer than max-width, the dropdown menu will shrink to fit the length of the longest item instead, just like a box with min-width: max-content (and min-width overrides max-width).

---

A visual example:

Folded:

+-----------+-+
| The selec |v|
+-----------+-+

Expanded:

+-----------+-+
| The selec |v|
+-----------+-+--------------+
| A really, really long item |
| A short item               |
+----------------------------+ 

---

That being said, it would be nice to mention the difference of length-fitting methods between the selection bar and the dropdown menu, and possible non-interoperability between browsers in this regard.

[OnkarRuikar]

That being said, it would be nice to mention the difference of length-fitting methods between the selection bar and the dropdown menu, and possible non-interoperability between browsers in this regard.

I don't think we should document browser specific behaviours and per element wise exceptional cases on the page.

Although true a lot of the time, its not technically true all the time. It might be worth adding a note for when this is not true, like with select inputs, width overrides max-width

This is very open ended statement. Specific example demonstrating the case would be nice.