title: Flexbox not working properly on Firefox but okay on Chrome & Safari
body: <p>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 (<a href="http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/" rel="noreferrer">http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/</a>)</p>
  
  <p>All these were very nice and gave some good suggestions, none of which worked for me. I tried setting </p>
  
  <pre><code>* {
      min-height: 0;
      min-width: 0;
  }
  </code></pre>
  
  <p>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.</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>/*  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;
      }
  
  
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;header id="header" role="banner"&gt;
  &lt;div id="header-logo"&gt;
      &lt;img src="http://staging.thestarvingsailor.ca/wp-content/uploads/2016/01/Moore-Logo.png" /&gt;
  &lt;/div&gt;
  
  &lt;div id="header-nav"&gt;
  
      &lt;div id="header-nav-title"&gt;
          &lt;h1&gt;Test Site&lt;/h1&gt;
          &lt;p&gt;Description for the test site.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="header-nav-tabs"&gt;
          &lt;a href="http://www.moorefamilychiropractic.ca"&gt;Home&lt;/a&gt;
          &lt;a href="http://www.moorefamilychiropractic.ca/about-us"&gt;About Us&lt;/a&gt;
          &lt;a href="http://www.moorefamilychiropractic.ca/services"&gt;Services&lt;/a&gt;
          &lt;a href="http://www.moorefamilychiropractic.ca/reviews"&gt;Reviews&lt;/a&gt;
          &lt;a href="http://www.moorefamilychiropractic.ca/blog"&gt;Blog&lt;/a&gt;
          &lt;a href="http://www.chirocorrection.com/moorechiro/" target="_blank" rel="noopener noreferrer"&gt;My ChiroCorrection&lt;/a&gt;
          &lt;a href="http://www.moorefamilychiropractic.ca/how-can-chiropractic-help-me"&gt;How Can Chiropractic Help Me?&lt;/a&gt;
          &lt;a href="http://www.moorefamilychiropractic.ca/contact-us"&gt;Contact Us&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  
  
  <p><a href="http://codepen.io/anon/pen/mPYZGY" rel="noreferrer">http://codepen.io/anon/pen/mPYZGY</a></p>