Flexbox isn't working in android web browser in Android 4.4.2

Question

There's this website I've been working on for a client of mine and I've been working on the mobile layout. I decided to use a flexbox layout for the overall website, but for some odd reason, the stock android web browser for 4.4.2 isn't loading any of my elements that are using flexbox. Chrome for Android loads all my elements using flexbox just fine. I can't be too sure of what's happening, but any help that can be given would be great. All my code is on "hoopactivation.x10.mx" if you use the developer tools. If need be, I can also post my code on here if neccesarry (Which will probably happen anyhow. I'm just not near my laptop right now).

Answer 1

I don’t have any specific code to post, but I’ve had some interesting issues with flexbox myself. I found the blog post at http://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/ very useful with explaining what you need to do to support other browsers. I was using the "modern" standard of flexbox until I found out it wasn’t working on Android, and found that blog post, so hopefully it’ll help. For the record, here is my CSS for the sticky footer:

 /*
 Sticky Footer - Flexbox
 */

.flexboxtweener, .flexboxtweener>body {
    height: 100%; /* IE 10 */
}

.flexbox {
    body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
        -webkit-flex: 1 0 auto;
    }
}

/*
 Sticky Footer - w/ JS, no flexbox
 */

html.js.no-flexbox {
    position: relative;
    min-height: 100%;

    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}

/*
 Sticky Footer - no JS, no flexbox
 */

// x-small
html.no-js {
    main {
        margin-bottom: 508px;
    }
    footer {
        height: 508px;
    }
}

@media (min-width: @screen-md-min) {
    .no-js main {
        margin-bottom: 210px;
    }

    .no-js footer {
        height: 210px;
    }
}

That’s in LESS and using some Bootstrap mixins, but hopefully that helps!

Answer 2

on some Android, flexbox is not working on inline elements, which seems like the flowing elements are gone.

To solve this, you have to force the flowing item to display:block. I've tried this and it works, you can see the detail here.

http://browser.colla.me/show/flexbox_make_element_collapse_height_0