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

Question

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

cssinternet-explorerflexbox

22

嗨

我在IE中使用flex有些问题：

http://jsfiddle.net/EvvBH/

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

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

flex-grow在IE中不支持吗？

- katie

5个回答

20

IE需要使用flex: 1 1 auto

它不理解flex: 1

- William

11

这是因为你在 <body> 上使用了 min-height 以获取完整高度。对于 Internet Explorer 浏览器，你需要使用 height 属性（使用 100% 或 100vh）。

- Johan Gorter

好的发现！我自己想不出来！谢谢。 - Ploppy

这个不正常，页脚没有附着在页面底部，而是附着在页面加载时视口底部的位置。在Browserling中在线测试。无需设置height，只需要使用flex: 1 1 auto即可。 - Alex78191

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>

- user341234

0

我会使用 -ms-flex: 1 1 auto; 因为IE不完全支持flex。应该加上前缀。

- Nienormalny_

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory · Accepted Answer

如果有人想尝试在非body元素上实现此效果，可以在具有min-height的元素上设置height: 0;。

IE浏览器只需要在flex-grow自动元素的父元素上设置任何高度。

因此可以像这样设置：

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