Internet Explorer 11 flexbox issues
17,395
Solution 1
Simply adding 100% width to the body fixed my problem.
Solution 2
You just need flex:1; It will fix issue for the IE11
#wrapper {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: 100%;
position: relative;
top: 1em;
flex:1;
}
Solution 3
Try display: run-in
or display: inline-block
instead of display: -ms-flexbox
;
Author by
jaypat32
Perpetual imposter syndrome but I've made some neat things.
Updated on June 21, 2022Comments
-
jaypat32 almost 2 years
The code I've written works in every browser I've tested except IE 11. The problem seems to be here:
#wrapper { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; height: 100%; position: relative; top: 1em; }
If I remove flex, it becomes more manageable, but with them, it shrinks all the content into this long, narrow div that goes on forever.
Would it help if I tested in IE 10?