on IOS grid-template-rows некорректно работает с "1fr"

Question

У меня странная проблема на IOS (chrome, safari):

.pageContainer {
    width: 100%;
    grid-template-rows: 100px 1fr 100px;
    display: grid;
    height: 100%;
    position: fixed;
    grid-template-areas:
            "header"
            "main"
            "footer"
}

Он отлично работает на P C (chrome, android), на Android, в MacOS (включая Safari), НО на IOS, grid-template-rows: 100px 1fr 100px просто создают проблемы: похоже, что IOS не может правильно обработать 1fr и занимает весь экран а не доступное пространство.

На IOS я должен использовать фиксированное значение, которое дает правильное значение, например 100px 500px 100px

header {
    grid-area: header;
    display: flex;
    justify-items: center;
    align-items: center;
    position: static;
}

article {
    grid-area: main;
    height: 100%;
    overflow: auto;
}

footer {
    display: flex;
    grid-area: footer;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    position: static;
}

Мой макет имеет заголовок stati c и нижний колонтитул и статью можно прокручивать.

Answer 1

Только что решил это с помощью minmax

grid-template-rows: 100px minmax(200px,1fr) 100px;