css3 flexbox compatibility problems with Firefox and Safari

Question

I\'m trying to sort out my flexbox layout so it is compatible with latest versions of IE/Firefox/Safari, and I have issues with Firefox/Safari.

Proposed layout:

Answer 1

First off, this:

body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;
}

Should be this:

body {
  display: -ms-flexbox;
  display: -webkit-flex;
}
@supports (flex-wrap: wrap) { /* hide from the incomplete Flexbox implementation in Firefox */
    body {
      display: flex;
    }
}

This doesn't do anything because IE doesn't have an implementation of the 2009 Flexbox draft:

body {
  -ms-box-orient: horizontal;
}

You've also added the moz prefix on the properties from the standard Flexbox draft, but Firefox implemented those prefix free (only the 2009 properties should have a moz prefix).

Even if you fix all of these things, it still won't work in Safari or Firefox. Why?

• Until iOS7 comes out, Safari only has an implementation of the 2009 Flexbox draft. It fails to implement box-lines: multiple, which is what enables wrapping in that draft
• Firefox has an implementation for the 2009 draft and the standard draft, but neither implementation supports wrapping.