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 Ruth Chorney
Ruth Chorney
2,689 Points

Flexbox and IE

In my body tag I have this

          body {
    display: flex;        
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    background-color: #9EA6BF;
}

It works fine with Firefox and Chrome but not with IE 10 or IE 11 So I did this

          body {
    /*display: flex; */       
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    background-color: #9EA6BF;
}

And the browsers mentioned above are happy

I tried adding this to my body

          body {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */       
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    background-color: #9EA6BF;
}

from https://css-tricks.com/using-flexbox/

Still doesn't work with IE What is strange that all the other flexbox rules on my site work with IE as long as I comment out the 

body {
   /*display: flex; */
}

Can anyone explain this

Mod Edit Just cleared up the forum markup to make the post a little clearer. :-)

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It might be worth having a look at the latest browser support for Flexbox. :-)

http://caniuse.com/#feat=flexbox

It looks like IE still only has partial support for Flexbox although Edge, which is the new browser fully supports it. Check the support notes and known issues for more.

Caniuse always shows the latest browser support for all CSS features.

Ruth Chorney
Ruth Chorney
2,689 Points

Thanks Jonathan. I think I will leave display: flex; commented out of the body tag because the pages work fine even with the rest of the flexbox codes on the pages.