Проблема с макетом, вертикальной прокруткой элемента body и таблицей с горизонтальной прокруткой и прикрепленными заголо ⇐ CSS

[Anonymous]

У меня есть overflow-y auto в теле и контент, содержащий таблицу. Существует элемент div, содержащий таблицу, и он имеет параметр overflow-x auto для горизонтальной прокрутки в виде таблицы. Таблица имеет заголовок с позицией, закрепленной и верхом 0.
Мои текущие проблемы:

• Если я добавлю overflow-x auto в контейнер таблицы div, то позиционирование thead будет закреплено не работает (не прилипает к столешнице при прокрутке по оси Y).
• Если я изменю thead на фиксированное положение, это сработает, но создаст другую проблему: испортит ширину контейнера thead, поскольку фиксированное положение основано на области просмотра экрана, а не относительно родительского элемента. >

Можно ли иметь элемент с положением липким и разрешить одному из контейнеров иметь переполнение-x auto без указания фиксированной высоты?
Codesandbox
Структура следующая:


















.main-container {
height: 100%;
width: 100%;
display: inline-grid;
}

.table-container {
overflow-x: auto; //this will mess thead sticky positioning. also tried, overflow-x: clip; - but it doesn't work..
height: 100%;
width: 100%;
}

table {
border-collapse: separate;
width: 100%;
table-layout: auto;
position: relative;
}

thead {
top: 194px;
position: sticky; //If i change to position fixed it will work but will create another issue where thead is not relative to parent and will overflow it's width.
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... -horizonta