带有/ overflow的嵌套flexbox在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。

正确的flexbox prefix value for IE是-ms-flexbox。

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

#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>