-webkit-flex not displaying properly on Android

Question

After realizing the wonderful abilities of display:flex, I made a web page that looks exactly how I want it to when viewed from Chrome 26 on Windows. However, it doesn't work in Chrome 26 on my Android, nor does it work in the Android browser 4.1 in my emulator. According to caniuse, all of these browsers should support it.

Perhaps coincidentally, the way it looks in Android appears (as far as I can tell) to be the same as what it looks like when I switch to the older version display:box.

Here is what it looks like in Windows vs. Android:

My question is, how can I prevent these cross-device issues? Perhaps using something other than flex until it becomes more standard would be better. Can anyone provide me a working example that doesn't use flex, or that works on Android? This is for a mobile web app. Any help is much appreciated. Links to my code are below.

With -webkit-flex: JSFiddle

With box: JSFiddle

Answer 1

There are 3 Flexbox drafts with different properties/values to be aware of. Caniuse only makes the distinction between browsers who support the current draft ("support") vs those who support either of the older drafts ("partial support").

To maximize browser support, you just include all of them going from oldest to newest versions.

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.bar {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

While all Android versions currently support the old 2009 properties, they will likely be dropped in the future in favor of the standard properties. Also note that Blackberry 10 is listed as supporting the current standard, not either of the old drafts.

Answer 2

For those curious, I ended up completely rewriting my code to not use flex. Here is a link to the JSFiddle that works just fine for my purposes. http://jsfiddle.net/8juSk/

It uses box and box-ordinal-group as suggested by @cimmanon.