Flexbox Wrap: Chrome vs. Firefox

Question

Yo! I'm working on getting this (3-3) flexbox layout to display consistently on both Chrome and Firefox.

This codepen demonstrates a working version of what I want to accomplish (3 columns and 2 rows) in both browsers: http://codepen.io/ntdb/pen/rabxzz . The relevant css from this pen:

*
  box-sizing border-box
.container
  display flex
  flex-wrap wrap
  .item
    display flex
    flex 1 0 33.333%
    flex-direction row
    flex-flow wrap
    justify-content center

This page includes the markup and css from my project and displays properly (3-3) in Firefox (36.0.4 on Mac) but improperly in Chrome (2-3-1) (41.0.2272.104 (64-bit) on Mac): http://www.ntdb.net/flexbox

I thought perhaps this discrepancy had to do with subpixel rendering but now that I have a working version (the codepen) I no longer believe that to be the case. Can anyone find the offending markup on the linked page?

What I want (and what Firefox renders):

What I have in Chrome:

Thanks!

Answer 1

It's caused by your .course-page .stat-display::before and ::after pseudo elements. Remove these (as they are not needed in a flexbox layout, I'm assuming you were using them for the purpose of float clearing?)

Answer 2

You can either remove the pseudo elements or you can also replace the display property of following class to block or flex

.course-page .stat-display:before, .course-page .stat-display:after {
    display:block; /*Set this property from table to block or flex*/
}