Flexbox not working properly on Firefox but okay on Chrome & Safari

Question

I'm building a website that relies heavily on flexbox. Only problem is that I cannot get it to mimic the chrome behaviour on Firefox. I looked on CSS-Tricks, SO and at this article (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)

All these were very nice and gave some good suggestions, none of which worked for me. I tried setting

* {
    min-height: 0;
    min-width: 0;
}

And every variation on my child and parent elements, but to no avail. I have included a CodePen link that illustrates my problem. When opened in FF 37.0.2 AND 46.0.1, it is completely broken. In Chrome and Safari, it looks just fine.

/*  Header Styles  */

#header{
    width:85%;
    margin:0 auto;
    height:375px;
    background-color:rgba(252,241,223, 1);
    padding:25px 75px 25px 0;
    font-family: 'Quattrocento Sans', sans-serif;
    border-radius:3px 3px 0 0;
}


#header-logo{
    width:33%;
    height:100%;
    display:flex;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    align-items:center;
    justify-content:center;
    float:left;
}

#header-nav{
    width:66%;
    height:100%;
    display:flex;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    justify-content:center;
/*  align-items:center;*/
    flex-direction:column;
}
#header-nav-tabs{
    margin-top:25px;
    padding-top:25px;
    border-top:1px solid rgba(0,0,0,0.5);
}

#header-nav-tabs a{
    font-size: 20px;
    color:black;
    text-decoration:none;
    margin:0 10px;
    white-space: nowrap;
}

#header-nav-tabs a:hover{
    text-decoration:underline;
}


@media screen and (max-width: 680px) {

    #header{
        height:auto;
        text-align:center;
        padding:25px;
        display:flex;
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        flex-direction: column;
        align-items: center;
    }

    #header-logo{
        width:auto;
        height:auto;
    }

    #header-nav{
        width:auto;
        height:auto;
    }

    #header-nav-tabs a{
        font-size:17px;
    }


}

<header id="header" role="banner">
<div id="header-logo">
    <img src="http://staging.thestarvingsailor.ca/wp-content/uploads/2016/01/Moore-Logo.png" />
</div>

<div id="header-nav">

    <div id="header-nav-title">
        <h1>Test Site</h1>
        <p>Description for the test site.</p>
    </div>

    <div id="header-nav-tabs">
        <a href="http://www.moorefamilychiropractic.ca">Home</a>
        <a href="http://www.moorefamilychiropractic.ca/about-us">About Us</a>
        <a href="http://www.moorefamilychiropractic.ca/services">Services</a>
        <a href="http://www.moorefamilychiropractic.ca/reviews">Reviews</a>
        <a href="http://www.moorefamilychiropractic.ca/blog">Blog</a>
        <a href="http://www.chirocorrection.com/moorechiro/" target="_blank" rel="noopener noreferrer">My ChiroCorrection</a>
        <a href="http://www.moorefamilychiropractic.ca/how-can-chiropractic-help-me">How Can Chiropractic Help Me?</a>
        <a href="http://www.moorefamilychiropractic.ca/contact-us">Contact Us</a>
    </div>

</div>
</header>

http://codepen.io/anon/pen/mPYZGY

Solution 1

Try changing the order of the display property declarations such that the standard is last. I think FF is letting that -moz prefixed property overwrite the previously declared value(s).

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display:flex;

Solution 2

The problem is the order of your prefixes.

Always put the official property (W3C standard) last in the list.

The CSS rendering engine will select the last applicable property. Firefox is reading past display: flex and selecting display: -moz-box, which is causing the problem.

More details: What is the proper way to order vendor prefixes for flexbox?

Comments

[TylerH]

Well, you have conflicting display settings prefixed for various browsers. Do you want display: box; or do you want display: flex? Removing display: box; properties from your code will fix this.

[colinmcp]

@TylerH I was under the impression that -moz-box was the flexbox prefix for FF, but I guess I was wrong! Removing it fixed the issue for me.

[TylerH]

display: box; was the property value for the 2009 version of the spec. It was changed in 2011 to display: flex; and the browsers followed suit, but they often include support for old properties to maintain backward-compatibility with sites using old code.

[Michael Benjamin]

Also, it's not really the property itself that caused the problem. It's how you have your prefixes ordered in the code. You don't need to remove anything. In fact, removal doesn't really fix the problem, because it may happen again with another browser. A more reliable solution would fix the ordering. I posted an answer.

[TylerH]

@Michael_B Another browser's going to add a new implementation of flexbox using the old, replaced 2009 value rather than the standard one? He should put the standard property last, yes, but removing the deprecated ones does really fix the problem.

[Michael Benjamin]

@TylerH, as I mention in my answer, CSS selects the last property that applies. That's the source of the problem in this question. By removing the prefixed version, you've fixed the problem for this instance. But if any of the prefixed versions apply to other another browser, the same problem will occur. Always better to put W3C property last on the list.

[TylerH]

@Michael_B I see; I thought you were referring to other browsers picking up the display: box properties.