React Modal I want to be able to scroll a modal when it is vertically long

Question

I am using react-modal.
I would like to be able to scroll the modal vertically when the screen is small. Currently, when the screen is small, the modal cannot be scrolled, so you cannot see the whole modal.

code

import React, { useState } from "react";
import styled from "styled-components";
import Modal from "react-modal";

export default function App() {
  const [isOpen, setModal] = useState(true);

  const Container = styled.div<{ height?: string }>`
    width: 400px;
    height: ${({ height }) => (height ? height : "")};
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    background: #ffffff;
  `;

  const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)"
    },
    content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
      padding: "0"
    }
  };

  return (
    <>
      <Modal
        isOpen={isOpen}
        onRequestClose={() => {
          setModal(false);
        }}
        contentLabel="modal"
        style={customStyles}
      >
        <p>Modal</p>
        <Container height={"600px"}></Container>
      </Modal>
    </>
  );
}

Answer 1

 const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)"
    },
    content: {
      ...//
      height:"200px" //or maxHeight 
    }
  };

add a fixed height or maxHeight to the modal

To scroll your entire modal you can use this style

 const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)",
      overflowY:"scroll"
    },
    content: {
     // your code
    }
  };