Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Boris Kamp
Boris Kamp
16,660 Points

Flexbox bug in IE9?

Hi guys!

I used flexbox on my entire site and everything is working great across various browsers, including IE11 (I won't go lower).

Apart from a bug where my tiles get don't get to their full height in IE9.

Please take a look at my staging site here: http://hbosafe.staging.wpengine.com/trainingen/

You see, the text and headings in the tiles are not the same height on all tiles, that's why I use Flexbox to give the parent container (.text-wrapper) the same height.

What am I doing wrong and is this fixable at all with this approach?

2 Answers

Christopher Debove
PLUS
Christopher Debove
Courses Plus Student 18,373 Points
Christopher Debove
Christopher Debove
Courses Plus Student 18,373 Points

You can see the compatibilty for flexboxes on CanIUse : http://caniuse.com/#feat=flexbox

Boris Kamp
Boris Kamp
16,660 Points

Hi Christopher,

Thanks for the links to canisuse, however I'm already aware of this. My question is more specific: can I fix my issue on IE11 with my current approach?

Christopher Debove
PLUS
Christopher Debove
Courses Plus Student 18,373 Points
Christopher Debove
Christopher Debove
Courses Plus Student 18,373 Points

Ow I see. On IE11 there's a known issue for flexboxes when the flex-container doesn't have height property defined. The only workaround for this issue is to specify a value for the height.