CSS-сетка с подсеткой и переполнением прерывается в Safari, но работает во всех других браузерах ⇐ CSS

[Anonymous]

Я создаю вложенную сетку CSS с подсетками, но при использовании overflow:auto в подсетке все это ломается в Safari.

В Chrome/FireFox это работает отлично , но в Safari он не работает, и по какой-то причине, когда я удаляю переполнение: auto;
он ​​работает в Safari... но мне нужно это переполнение, так как мне нужны только тело сетки для прокрутки. что может привести к сбою в Safari?
попробуйте, например, этот код:
CSS:

Код: Выделить всё

.main-grid {
height: 100px;
width: 500px;
display: grid;
grid-template-columns: minmax(4ch, 1fr) minmax(4ch, 1fr) minmax(min-content, 1fr);
grid-template-rows: auto 1fr;
}

.sub-grid-1 {
display: grid;
grid-template-columns: subgrid;
grid-column: 1/-1;
}

.sub-grid-2 {
display: grid;
grid-template-columns: subgrid;
grid-auto-rows: minmax(30px, 10%);
grid-column: 1/-1;
background-color: blue;
overflow: auto;
}

.sub-sub-grid {
display: grid;
grid-template-columns: subgrid;
grid-auto-rows: subgrid;
grid-column: 1/-1;
background-color: yellow;
border: 1px solid black;
}

HTML:

Код: Выделить всё

Header 1
Header 2
Header 3


1
2
3

Row

Row

Row

Row

Row

Row

Row

Row

Row

Row

Row

Row

Row

Row

Row

Row

Запустите его в Chrome (работает хорошо), запустите его в Safari (перерывы).
Ожидается, что он будет хорошо работать и в Safari
Изображения:
В Safari
В Chrome/Firefox

Подробнее здесь: https://stackoverflow.com/questions/779 ... ther-brows