• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Help w/ Flexbox & MSIE Problem

Question

primexx    372

I jumped into flexbox after reading that IE11 fully supports it. But to my dismay I discovered that it in fact breaks for some reason.

 

See example: http://codepen.io/anon/pen/RNRmgx

 

What it's supposed to do: scale and position the image relative to viewport.

 

What it actually does:

 

hDzdewy.png

 

You will notice that it displays fine in Firefox (and Chrome, not shown), but in IE it doesn't scale properly (stretches the picture) and it also doesn't align it on the page (just sticks to the top).

 

I'm quite new to flexbox itself, and having tried adding/removing lines, haven't been able to get any different result in IE. Is this something with my code? Or is this a bug in IE? If so, is there a workaround?

 

Thanks!

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0
+virtorio    3,121

I don't think vw and vh are properly supported in IE11. I updated the CSS a little and it seems to present correctly, except without scaling to viewport:

@charset "utf-8";



html, body {

  height: 100%;

}



header, footer {

 display:flex;

 flex-wrap:wrap;

 justify-content:space-around;

 align-items:center;

 align-content:center;

}

header {

 height: 100%;

}

#ima, #ima img {

 min-width:100px;

 max-width:10px;

 min-height:50px;

 max-height:50px;

}

post-27111-0-63286100-1419221784.jpg

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

Why not just embed the svg, use the viewbox property and css to resize it :p

Share this post


Link to post
Share on other sites
  • 0
primexx    372

 

I don't think vw and vh are properly supported in IE11. I updated the CSS a little and it seems to present correctly, except without scaling to viewport:


 

i didn't even think of viewport units, will have to look into that.

 

 

ah damnit. browser inconsistencies suck :(

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.