Я установил свой CSS следующим образом:
.container {
display: grid;
grid-template-rows: auto 1fr 7%;
}
Я перешел к https://autoprefixer.github.io/, который преобразовал его в:
.container {
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-rows: auto 1fr 7%;
grid-template-rows: auto 1fr 7%;
}
Первоначально в основном игнорируется 1fr, так что второй ряд - это его естественная высота. Специфичный для MS код заставил первую строку просто исчезнуть, вторая строка потеряла свою 100% ширину, а затем ничего больше. На Edge, Chrome и т. Д. Изменение никак не повлияло, как и ожидалось. Не уверен, что правильный способ получить 100% заполнения здесь.