Как отображать длинные раскрывающиеся списки в «фиксированном» окне просмотра? ⇐ CSS

[Anonymous]

У меня есть настраиваемый инструмент выбора даты (в контексте его высота составляет 1050 пикселей). Я хочу отобразить его во всплывающем окне в раскрывающемся списке. Это мой компонент всплывающего окна.

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

  className={styles.popupWrapper}
>

{popupContent comes here}

Я всегда хочу, чтобы всплывающее окно находилось в центре страницы, поэтому я использую вот такое фиксированное положение. Для любого другого контента это всплывающее окно работает абсолютно нормально, но когда я помещаю средство выбора даты в раскрывающийся список и хочу отобразить его во всплывающем окне, средство выбора выходит за пределы высоты области просмотра, и я не могу прокручивать из-за фиксированного положения. Ниже приведен CSS компонента всплывающего окна.

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

.popupWrapper {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
overflow: auto;
background-color: rgba(0, 0, 0, 0.3);
}
.popup {
position: relative;
display: flex;
flex-direction: column;
padding: 20px 30px 20px;
row-gap: 10px;
height: fit-content;
background-color: $box-color;
border-radius: 12px;
z-index: 99;
}

Я попробовал абсолютную позицию, она позволяет мне прокручивать, но всплывающее окно не обязательно каждый раз появляется в определенной части страницы, оно может быть где угодно, поэтому верхний процент может быть не должно быть установлено фиксированное значение, и я не хотел использовать свой компонент всплывающего окна именно так.
Есть ли какие-либо обходные пути, чтобы я мог отображать весь раскрывающийся список, прокручивая страницу?

Подробнее здесь: https://stackoverflow.com/questions/790 ... d-viewport