CSS网格布局：IE11中的重叠

Question

IE11有很多网格问题（当然），但我还没有看到这个问题。

问题很简单，不是彼此显示网格项目，而是显示在彼此之上，好像它们位于绝对位置？

以下是示例： https://dev.meteo.cam/detail

这就是现代浏览器的外观：

这是它在IE11中的样子:( （如果在检查器中选择元素，您将看到天气图像框与天气数据框重叠）

这是CSS代码：

.layout-grid {
    display: -ms-grid;
    display: grid;
    grid-gap:2em;
    padding: 2em;
}
.layout-grid-5050 {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

Answer 1

更改你的css并使用flex，如下所示：

.layout-grid {
   display: flex;
}

.layout-grid > .box {
   flex: 1;
}