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 not working in Internet Explorer 11
According to Flexbugs:
In IE 10-11,
min-height
declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.
Here are a couple of workarounds:
1. Always fill the viewport + scrollable <aside>
and <section>
:
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
header,
footer {
background: #7092bf;
}
main {
min-height: 0; /* added 2021*/
flex: 1;
display: flex;
}
aside, section {
overflow: auto;
}
aside {
flex: 0 0 150px;
background: #3e48cc;
}
section {
flex: 1;
background: #9ad9ea;
}
<header>
<p>header</p>
</header>
<main>
<aside>
<p>aside</p>
</aside>
<section>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</section>
</main>
<footer>
<p>footer</p>
</footer>
Display flex is not working in IE
Removed img-responsive
CSS class from img
and added vertical
.horizontal {
height: 150px;
line-height: 150px;
text-align: center;
}
.vertical {
vertical-align: middle;
max-height: 150px;
max-width: 100%;
}
updated Fiddle Here
Internet Explorer 11 flexbox issues
Simply adding 100% width to the body fixed my problem.
display: flex won't render properly in IE11
The layout works fine on IE11.
However, you may need to check the browser's compatibility setting.
Press F12, go to the "Emulation" tab, and check that "Document Mode" is set to IE11.
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/
Related Topics
Webgl - Wait for Texture to Load
How to Put a Space Character Before Option Text in a HTML Select Element
How to Make Text Vertically and Horizontally Center in an HTML Page
Links Not Going Back a Directory
Why Use Definition Lists (Dl,Dd,Dt) Tags for HTML Forms Instead of Tables
Twitter Bootstrap: Column Re-Ordering for Full Width Divs
Display: Inline-Block Does Not Make Width as Small as Possible with Wrapped Contents
How to Make Search Bots Ignore Certain Text
How to Create Chat Bubbles Like Facebook Messenger
Is It Possible Put Image in Input Type="Check Box"
Inline-Block Element with No Text Renders Differently
How to Keep Styles After Animation
Accessibility: Recommended Alt-Text Convention for Svg and Mathml
CSS/HTML: Create a Glowing Border Around an Input Field
How to Insert Raw HTML in Pug File (Not Include External HTML File)