Проблема с контейнером переполнения CSS при всплывающем окне ⇐ Html

[Anonymous]

В CSS overflow-x: auto и overflow-y:visible не работают вместе.
Как показано в приведенном ниже коде, я хочу, чтобы всплывающее окно переполнялось по оси Y, но если содержимое переполняется, горизонтальная прокрутка должна быть видна.
Почему overflow-y:visible здесь не работает и как сделать так, чтобы оно переполнялось по оси Y?
ссылка: https://codesandbox.io/p/sandbox/kfldx3
export default function App() {
return (



This content is larger than container

content




);
}

.container {
width: 50rem;
background-color: aqua;
height: 20rem;
overflow-x: auto;
overflow-y: visible;
}

.overflow-content {
width: 60rem;
background-color: red;
position: relative;
}

.popup {
position: absolute;
width: 30rem;
height: 30rem;
background-color: blue;
}

p {
margin: 0;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... with-popup