Flexbox cross browser funkiness

[davidf7101851]

Hi,

I'm trying to layout a few logos in a flexbox. in firefox and safari it looks just like I want it to. In opera and chrome however, an inexplicable height is applied to the objects withing the div. I'm miffed as to where this is coming from.

This is how it should look, and does in Firefox and Safari:

This is how it looks in Chrome and Opera:

This is the code:

.logo {

/*    margin: auto; */

}

.logo-parent {

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

/*    height: 40px; /* chrome (& opera) needs its specific rule */

}

.logo-parent {

}

.logo {

    padding-bottom: 1em;

    margin-top: -3em;

    height: 100%;

}

If I uncomment height and margin auto, the code works, but the items are then spaced evenly through the div. It's a hack of sorts, but I them justified, just as in the attached pictures. I wonder where this 200px height comes frm, as every file is 40 px, and I have nowhere in the entire code anything specified at 200px or equivalent.

I'm completely mystified as to why this happens. I'd really appreciate any input. Thanks.

[davidf7101851]

Changing "height: 100%" to "max-height: 3em" seems to work, but the graphics are ever so slightly streched, and look washed out. I'll have to live with that.

[Liam Dilley]

Hey david,

Flexbox rendering by firefox is still buggy, same with IE, does not work in IE 9, really buggy in IE10, Opera it is still buggy.

The ONLY browser works 100% on is the latest safari. Chrome is good but it does still have some issues.

Flexbox is awesome, but for me its not production ready to use just yet.