柔性成长在Internet Explorer中不工作11！0

海兰柔性成长在Internet Explorer中不工作11！0

我在IE浏览器中的一些麻烦柔性：

http://jsfiddle.net/EvvBH/

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

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

是flex-grow不支持IE吗？

来源

2014-06-24 katie

不是很确定你想要达到什么，但这不是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>

来源

2014-07-04 14:16:48 user341234

这是因为您使用min-height上<body>得到充分的高度。对于Internet Explorer，您需要使用height属性（使用100%或100vh）。

来源

2016-05-27 09:41:24

如果有人正在尝试这不是身体，但一些孩子div。你可以设置高度：0;在具有最小高度的元素上。

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

因此，它可能看起来像这样：

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

来源

2017-03-21 14:52:44 Rory

这不是一个好主意，如果你的块不再那么当前窗口高度 – brabertaser19

高度：在固定这对我的父元素0。谢谢！！！ – Ominus

柔性成长在Internet Explorer中不工作11！0

回答

相关问题