嵌套的flexbox w /溢出不能在IE10 +中工作

Question

我的Web应用程序中有一个UI元素，用作悬停面板。 面板本身有一个页眉，页脚和内容元素。 面板将具有最大高度，以避免面板从窗口溢出（这在window.onresize事件中更新）。

由于我只需要支持IE10及以上，我使用flexbox来支持这种布局。

我设法让这个跨浏览器工作： http ： //jsfiddle.net/Pyn9e/9/

尝试减小“结果”面板的大小，您将看到内容面板开始滚动而不是溢出，但仍然确保页眉和页脚不会消失。

 function setMaxHeight() { var maxHeight = $(window).height() - 16; $("#panel").css({ height: maxHeight + "px" }); } $(window).on("resize", function() { setMaxHeight(); }); setMaxHeight(); var i = 0; setInterval(function() { var ul = $("#list"); ++i; if (i <= 20) { var li = $("<li>").text("Item " + i); ul.append(li); } else if (i <= 40) { ul.children().last().remove(); } else { i = 0; } }, 60); 

 .flex-container { display: -ms-flex; display: flex; flex-direction: column; -ms-flex-direction: column; } .flex-fixed { flex: 0 1 auto; -ms-flex: 0 1 auto; } .flex-var { flex: 0 1 auto; -ms-flex: 0 1 auto; } #panel { position: absolute; top: 8px; left: 8px; width: 200px; color: white; overflow: hidden; } #panel > header { background: red; } #panel > .content { background: blue; overflow-y: auto; } #panel > footer { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="panel" class="flex-container"> <header class="flex-fixed">This is the header</header> <div class="flex-var content"> <ul id="list"> </ul> </div> <footer class="flex-fixed">This is the footer</footer> </div> 

但是，面板的内容是动态的，通常需要托管另一个弹性框（例如另一个页眉，页脚，内容）。 这在Chrome和Firefox中似乎很容易做到，但我无法让IE10和IE11工作： http ： //jsfiddle.net/Pyn9e/11/

正如您在IE10和IE11中看到的那样，面板现在溢出窗口而不是开始滚动。

 function setMaxHeight() { var maxHeight = $(window).height() - 16; $("#panel").css({ height: maxHeight + "px" }); } $(window).on("resize", function() { setMaxHeight(); }); setMaxHeight(); var i = 0; setInterval(function() { var ul = $("#list"); ++i; if (i <= 20) { var li = $("<li>").text("Item " + i); ul.append(li); } else if (i <= 40) { ul.children().last().remove(); } else { i = 0; } }, 60); 

 .flex-container { display: -ms-flex; display: flex; flex-direction: column; -ms-flex-direction: column; } .flex-fixed { flex: 0 0 auto; -ms-flex: 0 0 auto; } .flex-var { flex: 0 1 auto; -ms-flex: 0 1 auto; } #panel { position: absolute; top: 8px; left: 8px; width: 200px; color: white; overflow: hidden; } #panel > header { background: red; } #panel > .content { background: blue; } #panel > footer { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="panel" class="flex-container"> <header class="flex-fixed">This is the header</header> <div class="flex-container flex-var content"> <header class="flex-fixed">Content</header> <ul id="list" class="flex-var" style="overflow-y:scroll; padding: 0; margin:0"> </ul> </div> <footer class="flex-fixed">This is the footer</footer> </div> 

任何人都可以看到我可以支持IE的方式而不会过多地改变布局吗？ 谢谢。

Answer 1

IE前缀值应为-ms-flexbox ，而不是-ms-flex

在这两个示例中，您使用的浏览器前缀值都不正确： -ms-flex 。

IE的正确flexbox前缀值是-ms-flexbox 。

此外，您不需要使用JavaScript来设置窗口大小调整时容器的高度; 您可以通过在CSS中设置#panel的height来获得相同的结果：

#panel {
    …
    height: calc(100% - 16px);
    …
}

或者，因为#panel绝对定位，通过设置bottom位置：

#panel {
    …
    bottom: 8px;
    …
}

 var i = 0; setInterval(function() { var ul = $("#list"); ++i; if (i <= 20) { var li = $("<li>").text("Item " + i); ul.append(li); } else if (i <= 40) { ul.children().last().remove(); } else { i = 0; } }, 60); 

 .flex-container { display: -ms-flexbox; display: flex; flex-direction: column; -ms-flex-direction: column; } .flex-fixed { flex: 0 1 auto; -ms-flex: 0 1 auto; } .flex-var { flex: 0 1 auto; -ms-flex: 0 1 auto; } #panel { position: absolute; top: 8px; left: 8px; bottom: 8px; width: 200px; color: white; overflow: hidden; } #panel > header { background: red; } #panel > .content { background: blue; overflow-y: auto; } #panel > footer { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="panel" class="flex-container"> <header class="flex-fixed">This is the header</header> <div class="flex-container flex-var content"> <header class="flex-fixed">Content</header> <ul id="list" class="flex-var" style="overflow-y:scroll; padding: 0; margin:0"> </ul> </div> <footer class="flex-fixed">This is the footer</footer> </div>