Estoy construyendo un sitio web que depende en gran medida de flexbox. El único problema es que no puedo hacer que imite el comportamiento de Chrome en Firefox. Miré en CSS-Tricks, SO y en este artículo (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)

Todos estos fueron muy agradables y dieron algunas buenas sugerencias, ninguna de las cuales funcionó para mí. Traté de configurar

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

Y cada variación de los elementos de mi hijo y padre, pero fue en vano. He incluido un enlace CodePen que ilustra mi problema. Cuando se abre en FF 37.0.2 Y 46.0.1, está completamente roto. En Chrome y Safari, se ve muy bien.

/*  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