CSS grid + flex显示子项重叠元素IE11

Question

我在下面的示例中显示了一个网格系统，其中＆＃39; main＆＃39;网格的一部分有一个只属于它的页脚，应该显示在最底层。

|--------------|
|    header    |
|--------------|
|   |      |   |
| L | Main | R |
|   |      |   |
----------------

我了解当应用grid-template-rows: 64px calc(100% - 64px);时，底行（包含L，Main和R）将展开以填充其父级的(100% - 64px)。

现在我想将内容添加到Main网格单元格中，有时会出现溢出，有时会出现问题。所以我添加overflow: auto;以使滚动工作在Main级别。

我现在需要Main内的页脚总是在底部，所以我在同一个项目上使用display: flex;，这样我就可以分发其内容。

这就是麻烦开始的地方，我不确定是否由grid-template-rows给出的高度计算引起的冲突以及由其内容给出的实际高度导致的冲突{ {1}}子项与上面的元素重叠，如下图所示。

我无法将Main更改为显示块，因为此时它内部的页脚不会一直拉到底部。

这在Chrome上运行良好，在IE（惊喜）上失败，here is a working fiddle可用于重新创建问题并在两个浏览器上查看差异。

＆＃13;

＆＃13;

display flex

＆＃13;

*{
  box-sizing: border-box;
}
html, body{
  height: 100%;
  background-color: gray;
}

.outer-content{
      align-content: start;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 260px auto 320px;
    -ms-grid-columns: 260px calc(100% - 566px) 320px;
    grid-template-rows: 64px calc(100% - 64px);
    -ms-grid-rows: 64px calc(100% - 64px);
    grid-template-areas: "header header header" "leftbar main rightbar";
    height: 100%;
}
main{
  display: flex;
  flex-direction: column;
  grid-area: main;
  overflow: auto;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  background-color: pink;
}
.footer{
    background-color: #222326;
    font-family: "Open Sans",sans-serif;
    margin-top: auto;
    min-width: 400px;
    padding: 10px 0;
    position: relative;
    display: block;
    color: white;
    text-align: center;
}
.static{
    color: #fff;
    padding: 10px 10px 10px 40px;
    font-family: "Open Sans",sans-serif;
    font-size: .8rem;
}

＆＃13;

＆＃13;

＆＃13;