CSS display:flex align-items:baseline not working in Firefox

Question

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:

.container {
    display: flex;
    align-items: baseline;
}

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.

UPDATE

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 align-items:flex-start when using firefox and otherwise use baseline.

Answer 1

Here is my article about aligning blocks to their baselines. The example for align-items works ok in Fx except for the bug with overflowed block and paddings, which could be fixed in the same way it is fixed a while later.

However, for your example at http://www.nomadto.com/ things are different: the problem is that when you're doing align-items: baseline, Fx expects to see only inline-content inside, so if you'd replace most nested display: flex with display: inline-flex there, things would be much better. However, as there are a lot of extra wrappers and styles, it is rather hard right now to write you a full patch for fixing stuff, but if you'd create a more simple example somewhere at codepen or jsbin, I could try to fix it to work properly with proper baseline alignment.