title: CSS display:flex align-items:baseline not working in Firefox
body: <p>I am having trouble creating a consistent flexbox between Chrome, Safari and Firefox.  The css I have works great in Chrome/Safari but fails for Firefox.  The issue is when I try to have a      container element defined as:</p>
  
  <pre><code>.container {
      display: flex;
      align-items: baseline;
  }
  </code></pre>
  
  <p>my children elements align properly in Chrome and Safari but in Firefox they are aligned at the bottom and don't seems to have much bearing on the location of the text.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Ok so having investigated further, I believe the issue is that firefox vs. chrome and safari have a different way of calculating the baseline.  I essentially gave up on firefox and created conditional css which will <code>align-items:flex-start</code> when using firefox and otherwise use baseline.</p>