Input group with flex box I'm developing a Chrome extension so I can use bleeding-edge technologies like flexbox:

jsfiddle

HTML:



&lt;label for="example-search"&gt;Classic search example&lt;/label&gt;
&lt;div class="input-wrapper"&gt;
    &lt;input type="text" id="example-search" /&gt;
    &lt;button&gt;Search&lt;/button&gt;
&lt;/div&gt;


CSS (cleared to highlight flexbox):



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

.input-wrapper &gt; input {
    flex: 1 1 auto;
}

.input-wrapper &gt; 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).