React + TailwindCSS模态框溢出异常问题求助

你的问题出在内部模态框容器的垂直对齐设置上，同时固定高度可能导致内容溢出视口。以下是具体修改方案：

问题根源 #

内部模态框容器使用了justify-center，这会让内容在垂直方向居中排列，当设置固定高度时，顶部内容会被容器视口遮挡；另外固定的h-3/4可能在小屏幕上超出页面范围。

修改后的代码 #

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/30',
        'backdrop-blur-sm',
      )}
      onClick={handleOnCloseModal}
    >
      <div
        className={cx(
          className,
          'relative',
          'flex',
          'flex-col',
          'items-start',
          'justify-start', // 替换justify-center为justify-start，让内容从顶部开始排列
          'w-6/12',
          'max-h-[calc(100vh-5rem)]', // 限制最大高度不超出视口（减去外层p-10的上下内边距总和）
          'h-auto', // 高度随内容自适应，避免空容器占用多余空间
          'rounded',
          'bg-white',
          'overflow-x-hidden',
          'overflow-y-auto', // 仅内容超出时显示滚动条，优化体验
        )}
        onClick={(e) => e.stopPropagation()}
      >
        {children}
      </div>
    </div>
  )
}

export default Modal

关键修改点 #

• 替换justify-center为justify-start：彻底解决内容垂直居中导致的顶部遮挡问题，让内容从模态框顶部开始排列。
• 用max-h-[calc(100vh-5rem)]替代固定高度h-3/4：通过视口高度减去外层容器的上下内边距，确保模态框高度不会超出页面范围；搭配h-auto让高度随内容自适应。
• 将overflow-y-scroll改为overflow-y-auto：只有当内容超出容器高度时才显示滚动条，避免无内容时出现多余滚动条。

如果需要设置固定高度（比如300px），可以保留固定高度并搭配最大高度限制，确保小屏幕上不会溢出：

// 固定高度示例配置
'w-6/12',
'h-[300px]',
'max-h-[calc(100vh-5rem)]',

内容的提问来源于stack exchange，提问作者Kirill Vasilkovich