Internet Explorer 11 Flexbox问题

Question

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?

Answer 1

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;
}

Answer 2

只需在身体上添加100％的宽度就可以解决我的问题。

Answer 3

尝试display: run-in或display: inline-block而不是display: -ms-flexbox ;