QSelect width collapses when into flex row container and unknown other causes

Describe the bug As per title, QSelect width collapses, instead of showing label or selected value, when it’s container has display flex with direction row AND some other causes I cannot replicate into a JSFiddle. But the behaviour is reproducible in the Design Overview Docs example for QSelect, using DevTools.

Codepen/jsFiddle/Codesandbox (required) Tryed to recreate my scenario, but could not reproduce in JSFiddle. https://jsfiddle.net/ws0nr83h/6/

To Reproduce Steps to reproduce the behavior:

1. Go to Docs Design Overview example
2. Add row class to the select components container
3. See error

Expected behavior Should expand to the label length (or option with maximum length?)

Screenshots

Platform (please complete the following information): OS: W10 Node: 10.x NPM: 6.4.1 Yarn: 1.16 Browsers: Chrome, others not tested iOS: Not tested Android: Not tested Electron: Not tested

Additional context

[pdanpdan]

drop all the q-gutter... on QInput and QSelect - they are of no use, you don’t have flex children of them to space them.

[pdanpdan]

To clarify:

• QInput always has a native input inside it, and in all browsers that input has a default min-width, so the minimum width of empty QInput is that of the input inside
• QSelect most often does not have an input inside it, so the minimum width of QSelect with nothing selected is very small