Ie10 and Flexboxes? (Nightmare)

ie10 and flexboxes? (nightmare)

yeah, flexbox for IE 10 is a total nightmare.

here are some tips regarding IE 10 flexbox support scraped from several sites (this one was very helpful):

first of all - a very useful flag (can be placed on all elements):

flag for isolating IE10-specific CSS
.lt-ie11 & { }

the following definitions should be placed in the container element

Define a Flex container
display: -ms-flexbox;

Horizontal alignment:
-ms-flex-pack: start/end/center/justify;

Vertical Alignment
-ms-flex-align: start/end/center/stretch/basline;

the following definitions should be placed in the child element (the "item")

Element Ordering
the order number can be positive or negative. the lower the number the closer to the container start the element will appear
-ms-flex-order [number]

Setting an item's grow/shrink/preferred size
this is an important concept of flexbox, controlling how extra or negative (missing) space is divided between the child elements of a flexbox container.
Basically the higher the number, the more extra space is added to the preferred size (in the case of grow), or the more space is subtracted from the element to make it fit (in case of shrink). If a value of '0' is assigned, the element's size will not be affected.
-ms-flex: [grow shrink size];
or, the shorhand version:
-ms-flex: [value]; // == -ms-flex: value value 0
notice that unless defined explicitly, IE10 gives a default preferred size of 0, which may cause your element to completely disappear. This can be mitigated by defining an explicit size (either in px or %), or defining it as auto)

For a general discussion of Flexbox, you can take a look here, and a quick lookup is here

IE10: Unable to set any flex style properties via Javascript

This doesn't work because flexbox styling isn't supported in IE versions older than 11.

Flexbox text cutting off/not wrapping

Note I'm using autoprefixer so all -ms- prefixes are generated automatically. I will just note the prefix-less declarations here.

Adding the following line onto the paragraph did the trick flex: 0 1 auto;

I also had an issue where the text wouldn't wrap in the .feature-quote__cite container. I tried adding the above which didn't work. To fix this I had to add flex: 0 1 auto; directly onto the paragraph within rather than on the parent container .feature-quote__cite. Not ideal but it looks like it's done the trick.

As an aside, in IE11 the avatar image would get squashed when there wasn't enough horizontal space. I found adding flex-shrink: 0; to the image fixed this.

IE11 flexbox preventing text wrapping?

As far as I can tell, IE's flexbox implementation is just broken. That's the long and short answer to this question. The text should be wrapping, but it isn't. It does in Firefox and Chrome.

UPDATE:

IE11's flexbox implementation was indeed broken. This now renders properly in Edge.

Include IE executables in Eclipse RCP project

No, for both licensing and technical reasons, you cannot embed and redistribute IE10 executables. Doing so would violate Microsoft's copyright, and it wouldn't work anyway because IE10 does not support a non-installed "side-by-side" configuration.

Ie10 and Flexboxes? (Nightmare)