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

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

i having problem creating consistent flexbox between chrome, safari , firefox. css have works great in chrome/safari fails firefox. issue when seek have container element defined as:

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

my children elements align in chrome , safari in firefox aligned @ bottom , don't seems have much bearing on location of text.

update

ok having investigated further, believe issue firefox vs. chrome , safari have different way of calculating baseline. gave on firefox , created conditional css align-items:flex-start when using firefox , otherwise utilize baseline.

here article aligning blocks baselines. example align-items works ok in fx except bug overflowed block , paddings, fixed in same way fixed while later.

however, illustration @ http://www.nomadto.com/ things different: problem when you're doing align-items: baseline, fx expects see inline-content inside, if you'd replace nested display: flex display: inline-flex there, things much better. however, there a lot of wrappers and styles, rather hard right write total patch fixing stuff, if you'd create more simple illustration somewhere @ codepen or jsbin, seek prepare work proper baseline alignment.

css css3 firefox flexbox