嵌套的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

\n\n

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

\n\n

IE 的正确Flexbox 前缀值为-ms-flexbox。

\n\n

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

\n\n

#panel {\n    \xe2\x80\xa6\n    height: calc(100% - 16px);\n    \xe2\x80\xa6\n}\n

\n\n

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

\n\n

#panel {\n    \xe2\x80\xa6\n    bottom: 8px;\n    \xe2\x80\xa6\n}\n

\n\n

\r\n

\r\n

#panel {\n    \xe2\x80\xa6\n    height: calc(100% - 16px);\n    \xe2\x80\xa6\n}\n

\r\n

#panel {\n    \xe2\x80\xa6\n    bottom: 8px;\n    \xe2\x80\xa6\n}\n

\r\n

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

\r\n

\r\n

\r\n

\n