How do I make modal scrollable in reactjs

Question

I am developing an ecommerce application and I am using a modal for both registration and login.

the form is very long and overflows on the page

I want to modal to be able to scroll like bootstrap modal.

How do I make it scrollable?

Modal Component

const MODAL_STYLES = {
    position: "fixed",
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    backgroundColor: '#FFF',
    padding: '30px',
    zIndex: '1000',
    width: '50%',
    borderRadius: '.5em'
}
const OVERLAY_STYLE={
    position: "fixed",
    top: '0px',
    left: '0px',
    bottom: '0px',
    right: '0px',
    backgroundColor: 'rgba(0,0,0, .8)',
    
    zIndex: '1000'
}

login page

import React, {useState} from 'react'
import Modal from '../Components/Modal';
const Modal = ({open, children}) => {
    if(!open) return null
    return ReactDom.createPortal(
        <>
        <div style={OVERLAY_STYLE}>
            <div style={MODAL_STYLES}>
                {children}
            </div> 
        </div>
        </>,
        document.getElementById('portal')
    )
}
const [openLoginModal, setOpenLoginModal] = useState(false)
 {
            openLoginModal && (
                <Modal open={openLoginModal}>
                    <form action="">
                    <div className="form-group mb-2">
                        <label htmlFor="" className="mb-2">Full Name <span>*</span></label>
                        <input type="text" className="form-control" />
                    </div>
                    <div className="form-group mb-2">
                        <label htmlFor="" className="mb-2">Emil Address <span>*</span></label>
                        <input type="text" className="form-control" />
                    </div>
                    <button></button>
                    </form>
                </Modal>
            )
        }

link to codesandbox

https://codesandbox.io/s/muddy-voice-lf0ft

Answer 1

It would be best if you changed your styles to the same as below:

const MODAL_STYLES = {
  position: "absolute",
  backgroundColor: "#FFF",
  padding: "15px",
  zIndex: "1000",
  width: "35%",
  borderRadius: ".5em"
};

const OVERLAY_STYLE = {
  position: "fixed",
  display: "flex",
  justifyContent: "center",
  top: "0",
  left: "0",
  width: "100%",
  height: "100%",
  backgroundColor: "rgba(0,0,0, .8)",
  zIndex: "1000",
  overflowY: "auto"
};

Here's the code: https://codesandbox.io/s/quirky-almeida-dik6v