flex-grow在Internet Explorer 11中无法正常工作

Question

flex-grow在Internet Explorer 11中无法正常工作

kat*_*tie 18 css internet-explorer css3 flexbox

海兰

我在IE中使用flex有些麻烦:

http://jsfiddle.net/EvvBH/

请注意flex: auto,即使内容不足,#two元素也应该扩展它以填充容器.

但它只在Chrome和Firefox中实现.在IE中它根本不起作用.

是flex-grow不支持IE？

Answer 1

Ror*_*ory 47

如果有人试图这不是在身体上,而是一些儿童div.你可以设置高度:0; 在具有最小高度的元素上.

IE只想在flex-grow auto元素的父元素上获得任何高度.

所以它看起来像这样:

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

Run Code Online (Sandbox Code Playgroud)

如果您的块比当前窗口高度长,那不是一个好主意 (8认同)
高位:父元素中的0为我修复了这个.谢谢!!! (2认同)
我设置了“min-height: 100vh”，但 IE11 中没有任何反应。添加 `height: 100vh` 有效。溢出仍然表现正常（即，如果内容不适合子级，它仍然会正常扩展到视口之外）。 (2认同)

Answer 2

Wil*_*iam 11

IE需要 flex: 1 1 auto

它不明白 flex: 1

Answer 3

Joh*_*ter 8

发生这种情况是因为你使用min-height它<body>来获得全高.对于Internet Explorer,您需要使用该height属性(使用100%或100vh).

Answer 4

小智 0

不太确定您想要实现什么目的，但这不是 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，6 月前
查看次数：	20718 次
最近记录：	6 年，3 月前