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