Прокручивать основной контент, когда курсор находится на боковой панели ⇐ CSS

[Anonymous]

Я хочу включить прокрутку основного списка контента, даже когда курсор находится над боковой панелью. Например, в X (ранее Twitter) лента остается прокручиваемой, даже когда курсор находится над боковым меню или представлением трендов на главной странице, в то время как кнопки меню и элементы трендов остаются доступными для нажатия. Как я могу реализовать такое поведение?
Я пытался использовать события указателя, но мне не удалось одновременно сделать боковую панель кликабельной и позволить основному содержимому оставаться прокручиваемым, когда курсор находится над ним. боковая панель.
Нет необходимости следовать следующему коду. Это просто для примера. но я планирую использовать Flex или Grid CSS для создания макета.

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

body {
margin: 0;
display: flex;
height: 100vh;
overflow: hidden;
}

.container {
display: flex;
width: 100%;
}

.sidebar {
width: 250px;
background-color: #f4f4f4;
}

.main-content {
flex: 1;
padding: 20px;
background-color: #fff;
overflow-y: auto;
}

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

side bar (main content is not scrollable when cursor is over here).
button should be clickable

text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text

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