Элементы относительно более высокого родителя перестают быть липкими после прокрутки длины своего прямого родителя ⇐ Html

[Anonymous]

У меня проблема с компонентом сетки, которую я создал, как описано в заголовке. Элементы относится к родителю выше в DOM, но когда прокручивается ширина их прямых родителей, они начинают прокручивать и исчезать. PrettyPrint-Override ">

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

html, body {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.main-grid {
display: flex;
flex-direction: column;
gap: 8px;
background: #f8f8f8;
padding: 24px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
max-width: 500px;
overflow-x: auto
}
.row {
display: grid;
grid-template-columns: repeat(10, 120px);
position: relative;
background: #fff;
border-radius: 6px;
/* overflow: hidden; */
}
.cell {
padding: 12px 16px;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
background: inherit;
z-index: 1;
}
.row .cell:last-child {
border-right: none;
}
.row:last-child .cell {
border-bottom: none;
}
.sticky-side {
position: sticky;
left: 0;
background: #e0e7ef;
z-index: 2;
}
.sticky {
position: sticky;
left: 120px;
background: #d1e7dd;
z-index: 2;
}< /code>





Document





Sticky 1A
Sticky 1B
Cell 1C
Cell 1D
Cell 1E
Cell 1F
Cell 1G
Cell 1H
Cell 1I
Cell 1J


Sticky 2A
Sticky 2B
Cell 2C
Cell 2D
Cell 2E
Cell 2F
Cell 2G
Cell 2H
Cell 2I
Cell 2J


Sticky 3A
Sticky 3B
Cell 3C
Cell 3D
Cell 3E
Cell 3F
Cell 3G
Cell 3H
Cell 3I
Cell 3J

Любая помощь будет оценена.

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