柔性成長在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

回答

相關問題