10

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/

https://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?

Rick Kuilman
  • 146
  • 1
  • 12
  • It's a good question. You have a minimal fiddle that does demonstrate the problem, so we couldn't ask for more. Only one thing: what did you try, which tools did you use to try and pinpoint the problem? – Mr Lister Dec 29 '13 at 19:56
  • @MrLister I used jQuery to solve this problem, [see this JSFiddle](http://jsfiddle.net/f3YNe/6/). But my page has to be responsive as well. I could use `$(window).on('resize')`, but i'd rather use a nicer solution. – Rick Kuilman Dec 30 '13 at 12:25

2 Answers2

7

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/

Community
  • 1
  • 1
chrona
  • 1,853
  • 14
  • 24
  • Thanks for your answer! It works great in Firefox, but now Chrome is the problem. Using flex makes the `pure-u-1-3` stack upon each other in Chrome 32.0.1700.76m – Rick Kuilman Jan 18 '14 at 14:52
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.

twmbx
  • 105
  • 2
  • 9