html - 带溢出的嵌套 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>

但是，面板的内容是动态的，通常需要承载另一个 flexbox(例如另一个页眉、页脚、内容)。这在 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 中设置 #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>