flex-grow 在 Internet Explorer 11 中不起作用 [关闭]答案

【问题标题】：flex-grow not working in internet explorer 11 [closed]flex-grow 在 Internet Explorer 11 中不起作用 [关闭]
【发布时间】：2014-08-15 06:44:13
【问题描述】：

Hy

我在 IE 中使用 flex 时遇到了一些问题：

http://jsfiddle.net/EvvBH/

请注意#two 元素有flex: auto，它应该将其扩展以填充容器，即使没有足够的内容。

但它只在 Chrome 和 Firefox 中这样做。在 IE 中它根本不起作用。

IE 不支持flex-grow 吗？

【问题讨论】：

标签： css internet-explorer flexbox

【解决方案1】：

我将使用-ms-flex: 1 1 auto; 因为 IE 还没有完全支持 flex。应该带前缀。

【讨论】：

【解决方案2】：

IE 需要flex: 1 1 auto

看不懂flex: 1

【讨论】：

【解决方案3】：

如果有人不是在身体上而是在一些子 div 上尝试这个。您可以设置高度：0；在具有最小高度的元素上。

IE 只想要 flex-grow auto 元素的父元素上的任何高度。

所以它可能看起来像这样：

.flex-parent{
  display: flex;
  min-height: 300px;
  height: 0;
}
.flex-child{
  flex: 1 1 auto;
}

【讨论】：

这不是一个好主意，如果你的块长于当前窗口高度
父元素中的 height:0 为我解决了这个问题。谢谢！！！
不错的一个儿子，这个给我修好了，现在就去享受一下
这可以防止元素超过最小高度。
我设置了min-height: 100vh，但在 IE11 中什么也没发生。添加height: 100vh 有效。溢出仍然正常运行（即，如果内容不适合子项，它仍然会正常扩展超出视口）。

【解决方案4】：

发生这种情况是因为您在<body> 上使用min-height 来获得完整高度。对于 Internet Explorer，您需要使用 height 属性（使用 100% 或 100vh）。

【讨论】：

好收获！我想不通！谢谢。

【解决方案5】：

不太确定您想要实现什么，但这不是 Flexbox 布局的工作方式。要在元素上使用 'flex' 属性，它需要位于具有 'display:flex' 属性的父元素内。

<style>
    #flexContainer {
        display: flex;
    }
    #item1 {
        width: 50px;
        background: #66CC33;
        flex: 1;
    }
    #item2 {
        width: 50px;
        background: #0099FF;
        flex: 5;
    }
    #item3 {
        width: 50px;
        background: #66CC33;
        flex: 10;
    }
</style>

<html>
    <div id="flexContainer">
        <div id="item1">1</div>
        <div id="item2">2</div>
        <div id="item3">3</div>
    </div>
</html>

【讨论】：