Положение полосы прокрутки для тепловой карты с метками столбцов и строк ⇐ CSS

[Anonymous]

В моей текущей реализации метки строк и метки столбцов рядом с тепловой картой также находятся внутри прокручиваемого контейнера. Из-за этого полоса прокрутки не только закрывает саму тепловую карту, но становится шире и длиннее и включает

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

css:

.container {
width: 500px;
height: 500px;
border: 2px solid black;
overflow: auto;
position: relative;
display: grid;
grid-template-columns: 100px auto;
grid-tempalte-rows: 100px auto;
}

.col-labels {
grid-row: 1;
grid-column: 2;
position: sticky;
top: 0;
left: 0;
width: 1000px;
height: 100px;
z-index: 10;
background-color: grey;
}

.row-labels{
grid-row: 2;
grid-column: 1;
position: sticky;
top: 0px;
left: 0px;
width: 100px;
height: 1000px;
z-index: 10;
background-color: grey;
}

.corner{
top: 0px;
left: 0px;
position: sticky;
grid-row: 1;
grid-column: 1;
background-color: white;
z-index: 20;
height: 100px;
width: 100px;
}

.heatmap{
grid-row: 2;
grid-column: 2;
height: 1000px;
width: 1000px;
background-color: blue;
}

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

html:










Those are the column labels above the heatmap

Those are the row labels next to the heatmap

This is the heatmap

содержит метки столбцов и строк.
Ожидаемое поведение:
Только фактическая тепловая карта (без меток столбцов и строк) имеет полосы прокрутки по бокам. Метки строк и столбцов должны по-прежнему прокручиваться при прокрутке тепловой карты.
https://heatmap-grid.w3spaces.com/heatm ... llbar.html

Подробнее здесь: https://stackoverflow.com/questions/785 ... row-labels