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!

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 Michael Trilford
Michael Trilford
7,232 Points

ie11 - Flexbox Broken.

When an image is inside a flex item ( flex: 1; ), it ignores height: auto;

When the img width responds to change, the height stays the original fixed height.

Talk about fail.

Still works fine in IE10.

3 Answers

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

The support for flexbox is not very high and is therefore not recommended for websites in production. This link privides the basic support for flexbox. That being said, based on that page, their is an -ms- prefix on ie10 but not on ie11. See if adding the unprefixed version fixes your issue.

Michael Trilford
Michael Trilford
7,232 Points

Yeh, I got to can I use often.

It is a known issue, as Phil Walton ( Solved by Flexbox ) even has expressed his frustration. Essentially IE unprefixed it, but then they broke it.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Sounds like this is just another frustration caused by IE.

Michael Trilford
Michael Trilford
7,232 Points

Hopefully they will fix it asap, then again Phil reported the issue awhile ago he said.

philwalton: the most annoying thing is I reported it well before IE11 shipped and it didn’t make it in. Months later, it’s still not fixed. - twitter

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

What have you set the image width and height as tho? Set it as 100% to fill the parent element e.g. the flex box element, otherwise the flex box will ajust instead if the image is larger or not responsive due to no % unit used. Let me know if works.

Michael Trilford
Michael Trilford
7,232 Points

Width: 100%; Height: auto;

If I could attach an image in the forum I would : /

Can we attach images?

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Unfortunately the only way to place images here is by uploading the image elsewhere and using the image markdown from the markdown cheatsheet here.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Ok its a long shot but it is IE we are talking about, try the following code, not sure but worth ago:

img {
    max-width: 100%; //not sure if have to px tho
    max-height: 100%; //not sure if have to px tho
    width: auto !important;
    height: auto !important;
}

Let me know if complete fal or not

Michael Trilford
Michael Trilford
7,232 Points

Cheers for the help, unfortunately it didn't work.

Once flex is turned off the images act as they should. The images work correctly in IE10, but when viewed in IE11 it breaks.

You can actually view the image example in the microsoft link I posted above. Under the attachment tab.