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



<label for="example-search">Classic search example</label>
<div class="input-wrapper">
    <input type="text" id="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:

  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)

1 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).
  • \$\begingroup\$ 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? \$\endgroup\$
    – terales
    Mar 23, 2014 at 9:55
  • \$\begingroup\$ 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. \$\endgroup\$
    – cimmanon
    Mar 24, 2014 at 22:24
  • \$\begingroup\$ 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. \$\endgroup\$
    – terales
    Mar 25, 2014 at 8:37
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – cimmanon
    Mar 25, 2014 at 9:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.