React MUI中Popover内Grid组件自适应失效致屏幕溢出问题

问题场景 #

在React中使用Material UI时，Popover组件内嵌套了可动态增高的Grid组件：点击Grid内的按钮会新增列表项，随着列表项增多，Grid高度持续增加，原本应自动保持在屏幕内的Popover会溢出到屏幕下方。

代码示例 #

return (
  <Popover
    open={Boolean(anchorEl)}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}
    transformOrigin={{
      vertical: "top",
      horizontal: "left"
    }}
    aria-labelledby="draggable-dialog-title"
  >
    <div>
      <DemoGrid />
    </div> 
  </Popover>
);

function DemoGrid(){
  const [list,setList] = useState(["hi"]);

  return (
    <Grid container spacing={2}>
      <button onClick={()=>setList(prev=>[...prev,"hi"])}>add new</button>
      {list.map((i,j)=>(
        <Grid item xs={8} key={i+j}>
          <p>{`${j} ${i}`}</p>
        </Grid>
      ))}
    </Grid>
  );
}

解决方案 #

要让Popover始终保持在屏幕内，核心是限制内容区域的最大高度，避免内容无限扩展导致溢出，同时让超出部分可滚动：

方案1：通过PaperProps限制内容高度 #

给Popover添加PaperProps，设置最大高度和垂直滚动，这是最直接有效的方式：

<Popover
  // 保留原有属性
  PaperProps={{
    sx: {
      maxHeight: '80vh', // 限制最大高度为屏幕高度的80%，可根据需求调整
      overflowY: 'auto', // 超出部分启用垂直滚动
    }
  }}
>
  <div>
    <DemoGrid />
  </div> 
</Popover>

方案2：动态调整Popover位置（可选） #

如果需要完全显示内容不滚动，可以监听Grid内容高度变化，动态更新Popover的transformOrigin（比如当内容过高时，将定位原点改为bottom），但这种方式复杂度较高，仅在特殊场景下推荐使用。

原因分析 #

为什么Grid（flex布局）会让Popover失去屏幕内定位特性？ #

• flex布局的高度特性：Material UI的Grid组件默认使用display: flex布局，flex容器在没有明确高度限制时，会自适应子元素高度无限扩展。当持续新增Grid项时，Grid高度会超出Popover初始计算的尺寸范围。
• Popover的定位逻辑：Material UI Popover的屏幕内定位是基于组件初始渲染的尺寸计算的。当内容（Grid）动态增高后，Popover不会自动重新计算自身尺寸和位置，导致内容超出屏幕边界。
• 缺少高度约束：若不给Popover的内容区域设置最大高度，内容会持续延伸，当总高度超过屏幕可用空间时，Popover无法再保持在屏幕内，只能溢出。

内容的提问来源于stack exchange，提问作者Bhargav S