我有一個負責呈現模態窗口的組件，但我不能將其內容附加到模態窗口上。

import React, { ReactNode } from 'react'
import cx from 'classnames'

export interface ModalProps {
  className?: string 
  children: ReactNode
  visible: boolean
  onClose: () => void
}

const Modal = ({ className, children, visible, onClose }: ModalProps) => {
  const handleOnCloseModal = () => {
    onClose()
  }

  if (!visible) return null

  return (
    <div
      className={cx(
        'fixed',
        'flex',
        'justify-center',
        'items-start',
        'p-10',
        'inset-0',
        'bg-black',
        'bg-opacity-30',
        'backdrop-blur-sm',
      )}
      onClick={handleOnCloseModal}
    >
      <div
        className={cx(
          className,
          'relative',
          'flex',
          'flex-col',
          'items-start',
          'justify-center',
          'w-6/12',
          'h-3/4',
          'rounded',
          'bg-white',
          'overflow-x-hidden',
          'overflow-y-scroll'
        )}
        onClick={(e) => e.stopPropagation()}
      >
        {children}
      </div>
    </div>
  )
}

export default Modal

如果我設置固定的模態尺寸(例如300像素)，上面的一些內容會隱藏起來(見截圖)

情態的

它必須是這樣的，但我希望模式窗口的大小不要超出頁面

結果