Разрешить наложение прокрутки за другим фиксированным элементом ⇐ CSS

[Гость]

Учитывая следующую структуру, как я могу разрешить прокрутку элемента div #overlay, когда указатель мыши находится над фиксированным элементом div #widget, находящимся поверх него, при этом позволяя взаимодействовать с виджетом?
Использование pointer-events: none; в элементе #widget решает проблему прокрутки, но тогда взаимодействие с виджетом больше невозможно.
>
Можно было бы установить pointer-events: all для дочерних элементов виджета (например, кнопки закрытия), но мне нужно, чтобы весь виджет был интерактивным.
Я не ищу практических советов, таких как отвод мыши от виджета, а скорее технических решений этой конкретной проблемы путем применения атрибутов CSS, Javascript, html или изменения структуры.
/>

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

#parent {
overflow-y: hidden;
background: blue;
height: 100%;
}

#parent-content {
background: green;
}

.content {
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
outline: 1px solid black;
}

#overlay {
position: fixed;
top: 25%;
left: 25%;
bottom: 25%;
right: 25%;
background-color: red;
z-index: 1;
overflow-y: auto;
}

#widget {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
background: gold;
z-index: 2;
}

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

Content
Content
Content
Content
Content
Content
Content
Content


Content
Content
Content
Content
Content
Content
Content
Content

Источник: https://stackoverflow.com/questions/781 ... ed-element