咨询：如何让MUI Autocomplete组件在容器内垂直扩展不越界

要让Autocomplete限制在md=2的Grid容器内，仅垂直扩展，可从弹出层宽度控制和输入框内标签布局两方面调整：

1. 控制弹出选项列表的宽度与高度 #

通过PopperProps将弹出层的宽度设置为与父Grid容器一致，并限制最大高度避免过度延伸。

2. 调整输入框内选中标签的布局 #

修改标签的显示方式，让它们垂直堆叠而非水平排列，避免溢出容器。

修改后的完整代码： #

import * as React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";

export default function LimitTags() {
  return (
    <Grid container>
      <Grid item md={2}>
        <Autocomplete
          multiple
          limitTags={2}
          id="multiple-limit-tags"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
          // 控制弹出层样式
          PopperProps={{
            sx: {
              width: "100%",
              "& .MuiAutocomplete-listbox": {
                maxHeight: 300, // 限制弹出层最大高度，超出可滚动
              },
            },
          }}
          // 调整输入框内标签布局
          sx={{
            "& .MuiAutocomplete-tag": {
              display: "block",
              margin: "2px 0",
            },
            "& .MuiAutocomplete-inputRoot": {
              alignItems: "flex-start", // 输入内容顶部对齐
              minHeight: "unset", // 取消默认固定高度，随内容自适应
            },
          }}
          renderInput={(params) => (
            <TextField {...params} label="limitTags" placeholder="Favorites" />
          )}
        />
      </Grid>
    </Grid>
  );
}

// 示例电影数据（需确保实际项目中已定义）
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  // 其他电影数据...
];

关键说明： #

• PopperProps.sx.width: "100%" 让弹出层继承父Grid的宽度，彻底避免超出容器边界。
• 给MuiAutocomplete-listbox设置maxHeight，确保弹出层过高时自动出现滚动条，不会过度占用页面空间。
• 将MuiAutocomplete-tag设为块级元素，让选中的标签垂直排列，不再水平溢出输入框。
• 调整inputRoot的对齐方式和高度，让输入框随标签数量自适应垂直高度，保持布局紧凑。

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