Как получить липкую полосу прокрутки в CSS/Javascript при прокрутке внутри вложенных элементов div ⇐ CSS

[Anonymous]

У меня есть таблица, по которой мне нужно иметь возможность прокручивать ее по вертикали целиком. (поэтому, используя полосу прокрутки справа, вы одновременно прокручиваете левый И правый столбец)
Внутри этой таблицы есть 2 столбца, по которым мне нужно иметь возможность прокручивать по горизонтали ( индивидуально).
Но две горизонтальные полосы прокрутки исчезают внизу таблицы из-за вертикальной полосы прокрутки.
Как сделать, чтобы они были всегда видимы?
Вот пример скрипта: Пример скрипта

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

#data {
background: grey;
overflow: hidden;
display: flex;
flex-direction: column;

height: 400px;
width: 500px;
}

#splitter {
display: flex;
flex-direction: row;
background: darkgrey;
overflow-x: hidden;
overflow-y: auto;
align-items:start;
}

#right-content {
background: Gainsboro;
overflow-x: auto;
overflow-y: hidden;
}

#left-content {
background: Gainsboro;
overflow-x: auto;
overflow-y: hidden;
}

div {
margin: 10px;
}

p {
padding: 2px;
margin: 0px;
}

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

LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn
LeftColumnLeftColumn

RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally
RightColumnWithLongTextThatShouldBeScrollableHorizontally

Подробнее здесь: https://stackoverflow.com/questions/784 ... e-nested-d