My website is completely broken in IE11. The problem comes from flex: 1 1 0%;
, which I use everywhere thanks to autoprefixer and postcss-flexbugs-fixes.
The site does work on IE when I change it to flex: 1 1 auto;
, but then some behaviors change (e.g. one flexbox with two flex: 1 1 auto;
children which do not take exactly the same space). Therefore this solution breaks my designs on other browsers (while making it a lot nicer - not broken - on IE11).
How do people manage to make their sites built with Flexbox work on IE11?
Edit: here is a pen which highlights the problem I am facing: https://codepen.io/Zephir77167/pen/GMjBrd (try it on Chrome and IE11).
Edit2: here is the code:
HTML:
<div id="a" class="flex">
<div id="b" class="item flex-1">
Hey
</div>
<div id="c" class="item flex-0">
Ho
</div>
<div id="d" class="item flex-1">
Heyheyheyheyho
</div>
</div>
<br />
<div id="a" class="flex">
<div id="b" class="item flex-1-variation">
Hey
</div>
<div id="c" class="item flex-0">
Ho
</div>
<div id="d" class="item flex-1-variation">
Heyheyheyheyho
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
#a {
background-color: pink;
height: 300px;
width: 100px;
}
#b {
background-color: green;
height: 50px;
}
#c {
background-color: blue;
height: 100px;
}
#d {
background-color: yellow;
height: 150px;
}
.flex {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.item.flex-0 {
flex: none;
}
.item.flex-1 {
flex: 1 1 0%;
}
.item.flex-1-variation {
flex: 1 1 auto;
}
When it comes to IE11, you could target it explicit using this CSS rule:
_:-ms-fullscreen, :root .IE11-only-class {
/* IE11 specific properties */
}
Stack snippet
* {
box-sizing: border-box;
}
#a {
background-color: pink;
height: 300px;
width: 100px;
}
#b {
background-color: green;
height: 50px;
}
#c {
background-color: blue;
height: 100px;
}
#d {
background-color: yellow;
height: 150px;
}
.flex {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.item.flex-0 {
flex: none;
}
.item.flex-1 {
flex: 1 1 0%;
}
_:-ms-fullscreen, :root .IE-FlexAuto {
flex-basis: auto;
}
<div id="a" class="flex">
<div id="b" class="item flex-1 IE-FlexAuto">
Hey
</div>
<div id="c" class="item flex-0">
Ho
</div>
<div id="d" class="item flex-1 IE-FlexAuto">
Heyheyheyheyho
</div>
</div>
Here is a post with an answer of mine, which talks some more about this, and also provide some script solutions which might be helpful
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With