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: https://github.com/mdn/content/commit/7a9f9baa25d9a7313bd6c62ef5ef585b28459c58 * 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.

[estelle]

Suggestion:

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

   • Add amax-width example on the <select> page.
   • Explanations of the issues of setting a max-width on a <select> can be included in the <select> page.
   • If there are issues with selects and min-width, this would be the place to address those too.

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

   • Briefly mention there is an issue with max-width on <select> .
   • Link from that sentence on the max-width page to the example on the <select> page.

in other words, the select page is the appropriate venue for this issue to be addressed. We don't want to not include extra stuff on select in themax-width page other than providing a note that an issue exists with a link to where they can get more information about it.

[wbamberg]

Explanations of the issues of setting a max-width on a can be included in the page.

Note we already have https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#styling_with_css , which could be a good home for this.