Internet Explorer 11 弹性盒问题答案

【问题标题】：Internet Explorer 11 flexbox issuesInternet Explorer 11 弹性盒问题
【发布时间】：2017-08-15 10:26:43
【问题描述】：

我编写的代码在我测试过的所有浏览器中都有效，除了 IE 11。问题似乎在这里：

#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，它会变得更易于管理，但有了它们，它会将所有内容缩小到这个永远存在的又长又窄的 div 中。

如果我在 IE 10 中测试会有帮助吗？

【问题讨论】：

发布一个最小的工作代码 sn-p 重现问题，否则我们将无法提供帮助
@Michael_B 如果您发布相关的html并标记我，我会尽力帮助您。
flex 上不需要使用浏览器前缀。

标签： html css flexbox internet-explorer-11

【解决方案1】：

你只需要 flex:1;它将解决 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;
}

【讨论】：

嗯，没用。我也尝试了“自动”，但这也没有改变任何东西。
可以添加截图吗？
Chrome、Firefox 和 Edge：postimg.org/image/rbsn4ft8l Internet Explorer：postimg.org/image/grbt7njdv 两种蓝色都应该是相同的蓝色...
flex: 1 你设置在一个 flex 容器的孩子上，所以如果 wrapper 是一个 wrapper 这不会改变任何东西......因为我们可以'没有看到标记，我不明白你怎么可能知道这会解决它

【解决方案2】：

只需将 100% 的宽度添加到正文即可解决我的问题。

【讨论】：

【解决方案3】：

尝试使用display: run-in 或display: inline-block 而不是display: -ms-flexbox；

【讨论】：