MUI Grid item not working with overflowY: "auto"

Question

I am using MUI with React and I have a <Paper> element which wraps a <Grid> with 3 children elements. When setting the overflowY property of the bottom grid item to "auto", when the content becomes too big, the scroll bar doesn't show up but it breaks the parent container. This is my code:

                   <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>

I tried everything but I can't get the scroll bar appear for the 3rd (bottom) grid item (the one rendering {props.children(filteredData)} which is a list with list items fetched from the back end).

If I remove the overflowY: "hidden" from the <Paper>, the content of the 3rd gets hidden, but still no scroll bar - please see the photos attached.

I am really out of ideas, did anyone have this issue before? Thank you.

Answer 1

Fixed it. Apparently I had to add a height of 100% to the upper most grid (main container) and a flex-wrap of "no-wrap".