<select> boxes with very long <option> text causes grid columns to resize

[mor10]

Codepen demo: https://codepen.io/mor10/pen/zWmdPN

Short description: If grid columns are defined using fr units and a column contains a select element with a very long option text, the length of the option text defines the width of the grid column, regardless of the width of the select element and whether select { max-width: 100%; } is set.

[mor10]

Solution:

set min-width: 0; on the container holding the select box.

Still curious why the width of the options element forces the width of the grid column. It obviously interacts with the bounding box in some way, but that interaction is not available anywhere. Style inspector panels still only show the box as the displayed with of the select element while grid interprets it as the width of options.