[text-field] Allow width to shrink below default width out of the box

[rolfsmeds]

Description

Textfields currently don't shrink below their default width unless either

• a specific width has been set, or
• min-width is set to something smaller

While this is intentional, and aligns with the behavior of the native input element, we might want to consider changing it to allow shrinking down to maybe not zero but something significantly smaller than the default width without requiring the developer to set a width or min-width.

Steps to Reproduce

1. Put two vaadin-text-field elements in a vaadin-horizontal-layout with width:100%.
2. Shrink the horizontal-layout to less than 2x the default textfield width.

Expected Results

Both textfields shrink to fit into the layout

Actual Results

The textfield(s) overflow the layout horizontally.

[jouni]

Does this apply to text field derivatives (combo box, date picker, etc)? Do they already shrink or not?

[rolfsmeds]

They behave same as text-field (which is especially noticeable in time-picker which is significantly wider than necessary)

[web-padawan]

See also #1372 where this was previously discussed.

[jouni]

I assume it would be enough to add :host { min-width: 4em; } to text field (exact width TBD).

[rolfsmeds]

That would be my assumption as well. Afaik the problem currently is that min-width (in a flexbox) defaults not to 0 but to the element's intrinsic width, which in this case is the default width, so overriding that with something sufficiently small would allow the fields to shrink down to that (as opposed to not shrinking at all even with flex-shrink:1).