Questions & Answers

It would be largely depending on the actual use case, but in general the content container in Modal can be manually styled with a set maxHeight and overflowY: auto, to have a vertically scrolling container similar to a Dialog set with scroll="paper".

Example live on: stackblitz

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import Backdrop from "@mui/material/Backdrop";

export default function App() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  return (
    <div>
      <Button onClick={handleOpen} variant="contained">
        Open modal
      </Button>
      <Modal
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Box
            sx={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              width: 400,
              bgcolor: "background.paper",
              border: "3px solid #000",
              borderRadius: "10px",
              boxShadow: 24,
              py: 4,
            }}
          >
            <Typography variant="h6" component="h2" sx={{ px: 4 }}>
              Lorem ipsum
            </Typography>
            <Typography
              component="div"
              // 👇 Content box styled to scroll when overflowing
              sx={{ px: 4, mt: 2, maxHeight: "50vh", overflowY: "auto" }}
            >
              Long text content here
            </Typography>
          </Box>
        </Fade>
      </Modal>
    </div>
  );
}