由于我的员工表单对于屏幕来说太大了，所以，我想将scroll属性添加到我的模态内容中，其中表单被呈现为表单的太多字段，并且无法更改其中的任何一个。
那么，你能帮我解决卷轴的问题吗？谢谢！
这里我的代码

import React from 'react';
import modalCSS from '../styles/modal.module.css';
import PurchasesForm from './forms/PurchasesForm';
import SalesForm from './forms/SalesForm';
import ExpensesForm from "./forms/ExpensesForm";
import InventoryForm from './forms/InventoryForm';
import StocksForm from './forms/StocksForm';
import EmployeeForm from './forms/EmployeeForm';
import SalaryForm from './forms/SalaryForm';
import LedgerForm from './forms/LedgerForm';

function Modal({ prop, closeModal, propObject, setPropObject, operation, updateItem }) {

    return (
        <div className={modalCSS.container}>
            <div className={modalCSS.modalBox}>
                
                <div className={modalCSS.header}>
                    <h1 className={modalCSS.title}>Add {prop}</h1>
                    <img src='/images/cross.svg' alt='cross-mark' className={modalCSS.crossBtn} onClick={() => closeModal()}/>
                </div>

                <div className={modalCSS.modalContent}>
                    {prop === "Sale" && <SalesForm sales={propObject} setSales={setPropObject} operation={operation} updateItem={updateItem} />}
                    {prop === "Purchase" && <PurchasesForm purchase={propObject} setPurchase={setPropObject} operation={operation} updateItem={updateItem} />}
                    {prop === "Expense" && <ExpensesForm expense={propObject} setExpense={setPropObject} operation={operation} updateItem={updateItem} />}
                    {prop === "Inventory" && <InventoryForm inventory={propObject} setInventory={setPropObject} operation={operation} updateItem={updateItem} />}
                    {prop === "Stock" && <StocksForm stock={propObject} setStock={setPropObject} operation={operation} updateItem={updateItem} />}
                    {prop === "Employee" && <EmployeeForm employee={propObject} setEmployee={setPropObject} operation={operation} updateItem={updateItem} />}
                    {prop === "Salary" && <SalaryForm />}
                    {prop === "Ledger" && <LedgerForm />}
                </div>
            </div>
        </div>
    )
}

export default Modal

这是CSS文件
modal.module.css

.container{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

.modalBox{
    height: fit-content;
    width: 60%;
    background-color: #FFF;
    border-radius: 10px;
}

.header{
    padding: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #F0F0F0; */
}

.crossBtn{
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.modalContent{
    height: 100%;
    /* overflow: auto;
    overflow-x: hidden; */
    padding: 1%;
}

这就是当我把高度：适意;在modalBox类中
enter image description here
如果在modalBox中设置height: 80%;，并在modalContent类中设置height: fit-content;，则会发生这种情况
enter image description here
正如你在这里看到的，在设置了overflow属性之后，modal仍然保持良好，form仍然溢出。
所以，建议一个解决方案，记住我想保持高度：fit-content在modalBox类中，因为我正在为不同的类使用modal。所以我可以在那里适合不同大小的表单。
帮我一下，谢谢！