PureCSS.io - Pure Grid (height) displays different in Firefox

Question

I am using the Pure Grids of PureCSS. I have a pure-g with three pure-u-1-3, containing a few paragraphs. The problem is that there is a difference in display between Chrome/IE and Firefox when one of the units is longer than the others.

http://jsfiddle.net/f3YNe/3/

http://i.stack.imgur.com/VFVYu.png

I have tried to use jQuery to calculate the highest pure-u-1-3 and setting the rest to this height. But it didn't work out as expected, since this grid has to be responsive as well (using pure-g-r)

Does anybody know how to make Firefox produce the same output?

Answer 1

As purecss has fixed the problem (v0.6) by implementing it in every browser, this answer is obsolete.

Previous answer:

Your problem is that PureCSS is using -ms-display: flex in Internet Explorer and -webkit-display: flex in Webkit Browsers. Opera, Firefox and (obviously) older IEs don't get this solution.

To get it working in Firefox (20+) and Opera you could apply the following in your stylesheet:

.pure-g-r {
    display: flex;
}

Further information: http://css-tricks.com/using-flexbox/

Here a example using your fiddle: http://jsfiddle.net/f3YNe/12/

Answer 2

This has been fixed and accepted as a fix as part of pure's v0.6.0 milestone. The fix can be seen on Github here: https://github.com/yahoo/pure/pull/351/files.

If you're using pure prior to 0.6.0 coming out adding

.pure-g-r {
    display: flex;
    flex-flow: row wrap;
}   

to your css should make things play nice in your layout.