Input group with flex box

I'm developing a Chrome extension so I can use bleeding-edge technologies like flexbox:

jsfiddle

HTML:

Classic search example


Search



CSS (cleared to highlight flexbox):

.input-wrapper {
display: flex;
flex-flow: row nowrap;
}

.input-wrapper > input {
flex: 1 1 auto;
}

.input-wrapper > button {
flex-shrink: 0;
}


I have two questions:

• Is this the right way to work with flexbox?

• Is there is a way to gracefully degrade this to use in websites?

Using flexbox for production:

I recently found a great article about my issue: flexbox in the real world

Raw insigsts from atricle:

• use autoprefixer to support all old desktop and mobile browsers (they use old flexbox model syntax)

• use progressive enhancement for IE8- (see Scenario 3 from article)

Unless you're overwriting properties set elsewhere, there's no reason for this line because this is the default for all flex containers:

flex-flow: row nowrap;

If your goal is to make this work on browsers with either of the old Flexbox implementations, there are 2 things to be aware of:

• The March 2012 draft (IE10) does not have individual properties for flex-grow, flex-shrink, or flex-basis. The only way to control them is via the flex shorthand.

• The original draft does not allow you to have differing flex-shrink and flex-grow values. It would be ok to translate flex: 1 1 auto to box-flex: 1, but you can't translate something like flex: 1 0 (with prefixes). For your purpose, box-flex: 0 should work (though you might have problems with buttons in old Webkit browsers, see: https://stackoverflow.com/questions/16961192/flexbox-doesnt-work-with-buttons).

StackExchange Code Review Q#45099, answer score: 6