CSS flexbox not working in IE10
Flex layout modes are not (fully) natively supported in IE yet. IE10 implements the "tween" version of the spec which is not fully recent, but still works.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
This CSS-Tricks article has some advice on cross-browser use of flexbox (including IE):
http://css-tricks.com/using-flexbox/
edit: after a bit more research, IE10 flexbox layout mode implemented current to the March 2012 W3C draft spec: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
The most current draft is a year or so more recent: http://dev.w3.org/csswg/css-flexbox/
display: flex not working on Internet Explorer
Internet Explorer doesn't fully support Flexbox due to:
Partial support is due to large amount of bugs present (see known
issues).
Screenshot and infos taken from caniuse.com
Notes
Internet Explorer before 10 doesn't support Flexbox, while IE 11 only supports the 2012 syntax.
Known issues
- IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation.
- In IE10 and IE11, containers with
display: flex
andflex-direction: column
will not properly calculate their flexed childrens' sizes if the container hasmin-height
but no explicitheight
property. See bug. - In IE10 the default value for
flex
is0 0 auto
rather than0 1 auto
as defined in the latest spec. - IE 11 does not vertically align items correctly when
min-height
is used. See bug.
Workarounds
Flexbugs is a community-curated list of Flexbox issues and cross-browser workarounds for them. Here's a list of all the bugs with a workaround available and the browsers that affect.
- Minimum content sizing of flex items not honored
- Column flex items set to
align-items: center
overflow their container min-height
on a flex container won't apply to its flex itemsflex
shorthand declarations with unitlessflex-basis
values are ignored- Column
flex
items don't always preserve intrinsic aspect ratios - The default flex value has changed
flex-basis
doesn't account forbox-sizing: border-box
flex-basis
doesn't supportcalc()
- Some HTML elements can't be flex containers
align-items: baseline
doesn't work with nested flex containers- Min and max size declarations are ignored when wrapping flex items
- Inline elements are not treated as flex-items
- Importance is ignored on flex-basis when using flex shorthand
- Shrink-to-fit containers with
flex-flow: column wrap
do not contain their items - Column flex items ignore
margin: auto
on the cross axis flex-basis
cannot be animated- Flex items are not correctly justified when
max-width
is used
Flexbox IE10 width issues
I don't have IE10 available, but it seems like you should look at caniuse.com and the known issues. Or maybe this user moderated list on Github. Or maybe the comment section of the css-tricks guide.
The caniuse site mentions:
IE10 and IE11 default values for flex are
0 0 auto
rather than0 1 auto
, as per the draft spec, as of September 2013.
and
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
The Github site mentions:
When using align-items:center on a flex container in the column direction, the contents of flex item, if too big, will overflow their container in IE 10-11.
Workaround
Most of the time, this can be fixed by simply setting max-width:100% on the flex item. If the flex item has a padding or border set, you'll also need to make sure to use box-sizing:border-box to account for that space. If the flex item has a margin, using box-sizing alone will not work, so you may need to use a container element with padding instead.
This comment on css-tricks shows that where you would normally say flex: 1;
you should say -ms-flex: 1 0 auto;
Also, you should change your code where it does something like this:
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
to this:
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
You always want the proper line of code—the one without flags— at the bottom of the prefix list.
Flexbox in IE10
For IE10 , span should be displayed as inline-block
to trigger layout somehow .
Test here if it fixes it : http://codepen.io/gc-nomade/pen/lhsEt
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.
Workaround for IE 10/11 flex child overflow alignment
I figured it out. In IE 10/11 "justify-content" and "align-items" behave differently. If the child is larger than the container along the justify-content axis, then IE 10/11 will only ever use the "justify-content: flex-start" behavior. If the child is larger than the container along the "align-items" axis though, the content will be properly aligned according to the "align-items" value, even it the child overflows the container.
My solution was just to add "flex-direction: column" to the snippet below:
.wrap { width: 100%; height: 100%;}
.layer { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; margin: 0 auto; width: 100px; height: 100px; border: 1px solid blue;}
.layer-inner { font-size: 20px; width: auto; white-space: nowrap; line-height: 1em;}
<div class="wrap"> <div class="layer"> <span class="layer-inner"> This overlowing text should be centered </span> </div></div>
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 inpx
or%
), or defining it asauto
)
For a general discussion of Flexbox, you can take a look here, and a quick lookup is here
Text doesn't wrap in IE 10 when using flexbox
The source of the problem is the main
element in your HTML.
This element was introduced in HTML5 and is not recognized by IE10.
Since main
is not supported by IE10 – meaning it doesn't exist in the browser's default style sheet – the element assumes initial properties as defined in the spec.
As a result, main
in your layout is display: inline
. (Check dev tools and you'll find it has no width and is not wrapping anything. It's just a little spec.)
With the following adjustment, main
should work in IE10, enabling the text to wrap:
main {
display: block;
}
Note that the main
element is unique because other HTML5 elements such as article
, section
, header
and figcaption
(which are also in your code) work fine in IE10 (and even IE9). For whatever reason, IE left main
out in the cold. See the caniuse link below for more details.
More info:
- Default settings of unrecognized HTML elements
- <main> element not working in Internet Explorer 11
- 9.2.4 The
display
property main
element browser support at caniuse.com
Related Topics
Font Awesome 5 - Why Aren't Icons Like Bitcoin, Facebook, Twitter Showing
"Text-Align: Justify;" Inline-Block Elements Properly
Get Two Columns With Different Background Colours That Extend to Screen Edge
Vertical-Align Aligns Everything Else Except Self
How to Determine What Font a Browser Is Actually Using to Render Some Text
How to Style a Div to Be a Responsive Square
How to Have Css3 Animation to Loop Forever
Display:Block Inside Display:Inline
React Native Text Going Off My Screen, Refusing to Wrap. What to Do
Why Should We Include Ttf, Eot, Woff, Svg,... in a Font-Face
How to Use Svg as Content in a Pseudo Element ::Before or ::After
Simulating Transform-Origin Using Translate
Are Unused CSS Images Downloaded
How to Reset/Remove Chrome'S Input Highlighting/Focus Border
Set Flexbox Children to Have Different Heights to Use Up Available Space