Всплывающее окно пользовательского интерфейса материала — положение на маленьком экране ⇐ CSS

[Anonymous]

Некоторое время я пытался найти способ разместить всплывающее окно пользовательского интерфейса материала под моей привязкой и всегда оставлять его таким даже на маленьких экранах.
Вот песочница пример.
Это лучшее, что я получил, но на данный момент прокрутка находится не на теле, а в div-контейнере всплывающего окна, и это мне не помогает.
Просто поясню: я знаю, что могу использовать AnchorElement с позицией, но на небольших экранах всплывающее окно просто скроет привязку, я бы хотел, чтобы всплывающее окно всегда находиться под ним и просто прокручивать тело, чтобы при прокрутке вниз можно было видеть все содержимое всплывающего окна.

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

import React from "react";
import {makeStyles,MuiThemeProvider,createMuiTheme} from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
import Button from "@material-ui/core/Button";

export default function SimplePopover() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

const theme2 = createMuiTheme({
overrides: {
MuiButton: {
root: {
top: 400
}
},
MuiPopover: {
root: {
},
paper: {

height: 500
}
}
}
});
return (



Open Popover with anchor

id="popover-with-anchor"
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
Popover content.



);
}

Например, изображения. Когда всплывающее окно больше экрана, оно помещается на экране и выходит за пределы привязки
[img]https://i.sstatic. net/CT9hE.png[/img]

вместо того, чтобы находиться под привязкой



Подробнее здесь: https://stackoverflow.com/questions/614 ... all-screen