Flexbox Cross-Browser Tips and Tricks

The following are tips, tricks and links to great articles and repositories of solutions to help in dealing with those super annoying cross-browser Flexbox issues (looking right at you IE).

Articles and Reference Repositories

A Complete Guide to Flexbox (CSS-Tricks)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbugs (Philip Walton)
https://github.com/philipwalton/flexbugs

Flexible box ("Flexbox") layout in Internet Explorer 10 (Micrososft)
https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx

Cross-Browser Sample

Source: http://stackoverflow.com/questions/18019450/css-flexbox-not-working-in-ie10

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;

    /* Direction defaults to 'row', so not really necessary to specify */
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;

    /* Flex should have 3 values which is shorthand for 
       <flex-grow> <flex-shrink> <flex-basis> */
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -o-flex: 1 1 auto;
    flex: 1 1 auto;

    /* I don't think you need 'display: flex' on child elements * /
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    /**/
}