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>
justify content flex-end not working for IE
IE seems to align items differently using justify-content
when there is an overflow. it doesn't only happen with flex-end
, you will face the same using center
. Any value that will create a top overflow will not work as expected.
It will also happen in a row direction. Any property that will create a left overflow will not work.
Examples where the alignment is doing nothing:
.container { display:inline-flex; height:50px; width:50px; margin:50px; border:2px solid green;}.container span { flex-shrink:0; width:200%; background:red;}
.alt { flex-direction:column;}
.alt span { height:200%; width:auto;}
<div class="container" style="justify-content:flex-end;"> <span></span></div>
<div class="container" style="justify-content:center;"> <span></span></div>
<div class="container alt" style="justify-content:flex-end;"> <span></span></div>
<div class="container alt" style="justify-content:center;"> <span></span></div>
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
Flex works in chrome but not in IE
Instead of min-width: 100%
use width:100%
on timeline. So your time line code will be:
.logic_scrollbararea {
width: 100%;
}
.timeline {
height: 100%;
padding-top: 3.125rem;
position: absolute;
background: red;
width: 100%;
}
Flex Support IE 11, So Output in IE
Related Topics
How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)
Create an Object for Google Chrome
How to Declare a Variable in a Template in Angular
Woocommerce Change Product Image on Hover With CSS
Responsive Fullscreen Youtube Video With No Black Bars
Angular2, What Is the Correct Way to Disable an Anchor Element
Html5 Input Type Date Format to Mm/Dd/Yyyy Causing Issue in Chrome
First Name Validation Using HTML 5 Pattern
Html Wont Link to CSS File in Visual Studio Code
Change Default Text in Input Type="File"
How to Put CSS @Media Rules Inline
Disabled Form Inputs Do Not Appear in the Request
How to Position Text Over an Image With Css
How to Disable a Link Using Only Css
Vertically Align an Image Inside a Div With Responsive Height
Mobile Redirect Using Htaccess
How to Remove Margin Space Around Body or Clear Default CSS Styles