Встроенная поддержка прокрутки для пользовательского управления ⇐ Html

[Anonymous]

Существует известное поведение с CS Grid , где, если содержание ячейки больше, чем размер размерной ячейки макета, ячейка расширяется. Это означает, что ваша сетка - это лишь фиксированный размер, если содержание меньше или равно размеру ячейки. 'Auto' на самом фактическом контроле. Вам не нужно связываться с родительской сеткой .
Итак, мой вопрос. Как мне сделать управление, которое переключится на ScrollViewer, если его контент слишком большой, чтобы отображаться в ячейке сетки. то есть я не хочу связываться с родительской сеткой каждый раз, когда я хочу использовать свой контроль в новом месте. But I would to know how to fix it without messing with grid cells, as per the case when using 3rd party controls
https://jsfiddle.net/8b074ung/11/

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

.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);

width: 800px;
height: 300px;
}

.cell {
background: red;
margin: 10px;
/* min-width: 0;
min-height: 0;
display: flex;
flex-direction: row; */
}

.scrollable {
background: orange;
margin: 10px;
overflow: auto;
}

.row {
background: purple;
display: grid;
grid-auto-flow: column;
width: max-content;
}

.item {
width: 100px;
height: 100px;
margin: 5px;
background: green;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/797 ... om-control