flex-grow 在 Internet Explorer 11 中不起作用 [关闭]
Posted
技术标签:
【中文标题】flex-grow 在 Internet Explorer 11 中不起作用 [关闭]【英文标题】：flex-grow not working in internet explorer 11 [closed] 【发布时间】：2014-08-15 06:44:13 【问题描述】：Hy
我在 IE 中使用 flex 时遇到了一些问题：
http://jsfiddle.net/EvvBH/
请注意#two 元素有flex: auto，它应该将其扩展以填充容器，即使没有足够的内容。
但它只在 Chrome 和 Firefox 中这样做。在 IE 中它根本不起作用。
IE 不支持flex-grow 吗？
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于flex-grow 在 Internet Explorer 11 中不起作用 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章