Select element grows differently than input in display flex

Question

I\'m getting an unexpected behavior in my setup. The inputs grow horizontally as expected but on the row with a select control, the growth seems to be distorted.

I s

Answer 1

You're using flex-grow: 1 to size your flex items. That's fine when all items are identical or contain identical content.

Except one of your flex items is different. It has the select element. That will affect the sizing of the item because an initial value of a flex item is flex-basis: auto.

With flex-basis: auto the flex-grow property goes into effect after the width of the item is factored in. Because the width of your items are different, their size after flex-grow is applied will be different.

You need to use flex-basis: 0, which allows flex-grow to ignore the width of the item and focus only on the available space in the container.

Instead of flex-grow: 1 use this:

• flex: 1

Which is shorthand for:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

See the spec for more details: https://www.w3.org/TR/css-flexbox-1/#flex-common

Also, to counter problems such as these, the spec recommends always using the flex shorthand as opposed to longhand properties:

7.2. Components of Flexibility

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.