html - IE11 - 如果上面内容的高度大于窗口高度，页面底部的 "footer"会被下推

Question

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

这是演示的 fiddle :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 中工作吗？

Answer 1

结果改变了上层 flex 容器的 css 如下:

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

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

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