How do I make modal scrollable in reactjs - 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

You should change your styles same as bellow:
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