0

I'm working with CSS Grid and facing a problem with grid element which has height of 1fr and overflow-y: hidden.

It is <ul>, which has a big <li> number and must be scrollable.

In FF and Chrome everything works well, but Safari did not cut the list and did not add scroll. Similar problem in Edge.

Parent block: 

.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%;
}

Child #1 

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

Child#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;
}

Here the second child is the target element, which must be scrollable.

4

0 回答 0