search

rachelandrew / gridbugs

A curated list of Grid interop issues
MIT License
1.19k stars 25 forks source link

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

Open mor10 opened 6 years ago

mor10 commented 6 years ago

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 commented 6 years ago

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.