MUI网格项目无法使用溢出Y：“自动”

Question

[我正在将MUI与React一起使用，并且我有一个<Paper>元素，该元素包装了<Grid>和3个子元素。将底部网格项的overflowY属性设置为“自动”时，如果内容太大，则滚动条不会显示，但会中断父容器。这是我的代码：

                   <Paper
                        elevation={0}
                        style={{
                            height: "776px",
                            width: 342,
                            overflowY: "hidden"
                        }}
                    >
                  <Grid
                    container={true}
                    direction="column"
                    style={{ overflowY: "hidden" }}
                   >
            {

                <Grid
                    container={true}
                    item={true}
                    style={{
                        flexGrow: 1,
                        padding: "16px",
                        width: "100%",
                        flexWrap: "nowrap",
                        position: "sticky",
                        top: 0
                    }}
                >
                    {props.pageTitle && (
                        <Grid item={true} style={{ marginTop: 6 }}>
                            {!filterOpen && (
                                <Typography variant="h6">
                                    <span
                                        style={{
                                            paddingLeft: 8
                                        }}
                                    >
                                        {props.pageTitle}
                                    </span>
                                </Typography>
                            )}
                        </Grid>
                    )}

                    {props.allowFilter && (
                        <Grid justify={"flex-end"} container={true} item={true}>
                            <FmsFilterBox
                                filterText={filterText}
                                onChange={setFilterText}
                                cssFilterBoxWidth="100%"
                                onFilterOpenChanged={setFilterOpen}
                            />
                        </Grid>
                    )}
                </Grid>
            }


            <Grid item={true} style={{ flexGrow: 1 }}>
                <Divider style={{ width: "100%" }} />
            </Grid>



            <Grid
                item={true}
                style={{
                    flexGrow: 1,
                    overflowY: "auto"
                    }}
              >
                {props.children(filteredData)}
                </Grid>
            </Grid>
        </Paper>

我已尝试了所有方法，但无法使第三个（底部）网格项（一个呈现{props.children（filteredData）}的渲染，该列表是从后端获取列表项的列表）的滚动条出现。] >

如果我从overflowY: "hidden"中删除了<Paper>，则第3个对象的内容将被隐藏，但仍然没有滚动条-请查看随附的照片。

我真的没主意，以前有人遇到过这个问题吗？谢谢。

我正在将MUI与React一起使用，我有一个元素，该元素将与3个子元素包装在一起。当将底部网格项目的overflowY属性设置为“自动”时，当...

Answer 1

已解决。显然我必须在最上面的网格（主容器）中添加100％的height，并在“无包装”中添加flex-wrap。