Alternative to "Display:-webkit-flex" for Chrome Mobile

Question

Lately I've been working on a mobile optimised web platform utilising HTML5/CSS3. This application has a landing page which consists of four equally sized tiles with an Icon in the middle (some other styles like a bit of padding in between them and border radius etc). These tiles are sized based on the screen size using "display: flex;" obviously due to the nature of the user being able to change the screen orientation.

I'm achieving this using the following markup...

HTML

<div class="container">        
    <a href="1.aspx">
        <span class="icon1"></span>
    </a>
    <a href="2.aspx">
        <span class="icon2"></span>
    </a>
    <a href="3.aspx">
        <span class="icon3"></span>
    </a>
    <a href="4.aspx">
        <span class="icon4"></span>
    </a>
</div>

CSS

.container {
    min-height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }   

    .container a {
        -webkit-flex: 1 1 48%;
        flex: 1 1 48%;
        margin: 1%;
        position: relative;

        -webkit-border-radius: 8px;
           -moz-border-radius: 8px;
                border-radius: 8px;

        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        }

I've run into a rather frustrating issue whereby this doesn't display properly at all on Chrome Mobile (works on Beta, not on current version) on either iOS or Android.

Basically I'm looking to re-write the CSS to achieve exactly the same layout but I'm having difficulty finding another way to do it, any help is much appreciated.

Answer 1

Beta is likely to support a recent re-draft of the functionality (which you're using in your code), whereas older browsers (ie the ones not currently in beta!) went by a different syntax. There's a good article on this here. Meanwhile, caniuse.com is great for a quick check on what supports what.