Как отображать длинные выпадения в `fixed` viewport? ⇐ Html

[Anonymous]

У меня есть настроенный сборщик даты (для контекста его высота составляет 1050px). Я хочу отобразить его во всплывающем окне в раскрывающемся контенте. Это мой всплывающий компонент. < /P>
className={styles.popupWrapper}
>

{popupContent comes here}


< /code>
Я всегда хочу, чтобы всплывающее окно находилось в центре страницы, поэтому я использую такую ​​фиксированную позицию. Для любого другого контента это всплывающее окно работает абсолютно нормально, но когда мой DatePicker в раскрывающемся списке и хочу отобразить его во всплывающем окне, сборщик выходит за рамки высоты видового порта, и я не могу прокрутить из -за фиксированной позиции. Ниже приведен CSS всплывающего компонента. < /P>
.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;
}
< /code>
Я попробовал абсолютное положение, оно позволяет мне прокручивать, но всплывающее окно не обязательно приходит в определенную часть страницы каждый раз, он может быть где угодно, поэтому верхний % может Не быть установленным на фиксированное значение, и это не то, как я хотел использовать свой всплывающий компонент.>

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