IE11 - 如果上面的内容高度大于窗口高度，页面底部的“页脚”会被向下推答案

【问题标题】：IE11 - a "footer" at the bottom of the page that gets pushed down if height of content above is greater than height of windowIE11 - 如果上面的内容高度大于窗口高度，页面底部的“页脚”会被向下推
【发布时间】：2019-02-26 04:24:26
【问题描述】：

我已经实现了一个“页脚”，它位于页面底部，如果上面内容的高度大于窗口的高度，它就会被下推。这在 Chrome 上运行良好，但是如果上面内容的高度大于窗口的高度，IE11 不会下推页脚。 IE11 只是让内容溢出页脚：

这是演示的小提琴：https://jsfiddle.net/6zrk5adu/2/

我实现它的方式只是一个上层 flex 容器：

.upper-flex-container {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

还有一个用于页脚的较低 flex 容器：

.build-version-flex-container {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75px;
  display: flex;
  justify-content: space-between;
}

我可以改变什么让它工作，这个 flex 布局甚至可以在 IE11 中工作吗？

【问题讨论】：

标签： html css flexbox cross-browser internet-explorer-11

【解决方案1】：

原来改变上部flex容器的css如下：

.upper-flex-container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

解决了这个问题。不完全确定为什么，似乎是 IE11 特定的。

https://jsfiddle.net/4xtjw35k/4/

【讨论】：