Невозможно одновременно получить липкую строку и столбец из-за переполнения-x ⇐ CSS

[Anonymous]

У меня есть таблица, которая должна прокручиваться как по вертикали, так и по горизонтали, но с двумя поворотами. Верхний/нижний колонтитул должен быть закреплен сверху/снизу, а левый набор столбцов должен быть зафиксирован с левого края.
Я использовал display:sticky, который работал как ожидалось, пока я не активировал overflow-x:scroll в правой части таблицы. Судя по всему, эти два стиля сталкиваются и приводят к нежелательному результату. Проблема решена путем переноса внутренней разметки в раздел, который можно прокручивать по вертикали. К сожалению, это исключает возможность горизонтальной прокрутки, ограниченной нужным набором столбцов. Теперь вся таблица прокручивается горизонтально (включая левые столбцы, которые должны быть исправлены).
Вот скрипт, иллюстрирующий «к сожалению» решенную проблему.
Как мне лучше всего подойти к этому?
Чтобы решить последнюю, неприятную часть, коллега предлагает поместить копию левых столбцов поверх мою таблицу и позвольте всему исходному содержимому прокручиваться горизонтально за ней, создавая иллюзию закрепленного содержимого.
Однако при этом возникает проблема верхнего/нижнего колонтитула наложения. не залипает при вертикальной прокрутке, и мы возвращаемся к квадрату 0. В скрипте это можно отобразить, изменив стиль отображения на flex вместо none, а компонент имеет идентификатор исправил.

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

#fixy {
display: none;
border-color: fuchsia;
position: sticky;
left: 0;
top: 0;
overflow: hidden;
z-index: 10;
}

#fixy .cell {
background-color: teal;
color: white;
font-weight: bold;
}

Образ желаемого идеального состояния. Стрелка влево указывает на курсор текущей горизонтальной прокрутки. Стрелка вправо указывает на желаемую ширину/расположение вся прокрутки.
HTML

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

left head 1
left head 2


val1a
val1b


val2a
val2b


val3a
val3b


left foot 1
left foot 2





left head 1
left head 2


val1a
val1b


val2a
val2b


val3a
val3b


left foot 1
left foot 2




right head 1
right head 2
right head 3
right head 4
right head 5


cont1
cont2
cont3
cont4
cont5


cont1
cont2
cont3
cont4
cont5


cont1
cont2
cont3
cont4
cont5


right foot 1
right foot 2
right foot 3
right foot 4
right foot 5

CSS

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

* {
border-width: 1px;
border-style: solid;
}

div.section {
border-color: pink;
width: 600px;
height: 300px;
display: flex;
overflow: scroll;
flex-direction: row;
position: relative;

align-items: flex-start;
justify-content: stretch;
}

#fixy {
display: none;
border-color: fuchsia;
position:  sticky;
left: 0;
top: 0;
overflow: hidden;
z-index: 10;
}

#fixy .cell {
background-color: teal;
color: white;
font-weight: bold;
}

div {
display: flex;
white-space: nowrap;
}

div.left {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;

border-color: blue;
min-width: 300px;
max-width: 300px;
flex: 0 0 0;

}

div.right {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;

border-color: green;
flex: 1 1 0;
}

div.header {
border-color: orange;
flex-direction: row;
min-height: 90px;
max-height: 90px;
position: sticky;
top: 0;
}

div.row {
border-color: pink;
flex-direction: row;
min-height: 60px;
max-height: 60px;
flex: 1 1 1;
}

div.footer {
border-color: purple;
flex-direction: row;
min-height: 90px;
max-height: 90px;
position: sticky;
bottom: 0;
}

div.cell {
background-color: yellow;
align-items: center;
padding: 10px;
}

div.wide {
flex: 1 1 0;
background-color: azure;
}

div.fixed {
width: 100px;
min-width: 100px;
}

Подробнее здесь: https://stackoverflow.com/questions/786 ... overflow-x