具有可滚动内容的网格1fr高度元素不起作用

Question

我正在使用CSS Grid并遇到高度为1fr和overflow-y: hidden的网格元素的问题。

它是<ul>，其编号为<li>，必须可滚动。

在FF和Chrome中，一切运行良好，但Safari没有删除列表并且没有添加滚动。 Edge中的类似问题。

父级阻止：

.animatedBlock {
    display: -ms-grid;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: px(40);
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto px(20) 1fr;
    position: relative;
    width: 100%;
    height: 100%;
}

孩子＃1

form {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        grid-column: 1;
        position: relative;
        user-select: none;
}

子＃2

ul {
        @media screen\0 {
            -ms-overflow-style: none;
        }

        @supports (-ms-ime-align:auto) {
            -ms-overflow-style: none;
        }

        overflow-y: auto;
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        grid-column: 1;
        grid-row: 2;
}

这里第二个子元素是目标元素，它必须是可滚动的。