Input group with flex box

Question

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

jsfiddle

HTML:

<label for="example-search">Classic search example</label>
<div class="input-wrapper">
 <input type="text" id="example-search" />
 <button>Search</button>
</div>

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:

1. Is this the right way to work with flexbox?
2. 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)

Answer 1

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).

• terales: Thanks, @cimmanon. Do you have any example for production ready solution? It's not hard to add some old properties and add flexbox model v. 2009 for old Chrome/Firefox/Opera/Mobile, but what to do with IE?
• cimmanon: You've already shown you know how to use the flex shorthand, I didn't think I needed to add it: flex: 0 1 auto instead of flex-shrink: 0.
• terales: I prefer to use property directly for clarifying what i want to achieve. flex-shrink: 0 explicitly says to me that button wouldn't shrink.
• cimmanon: Er, guess I meant flex: 1 0 auto. Unfortunately, you don't have a choice if you want to cover all of your bases: IE10 doesn't have a flex-shrink property, you have to use flex instead.