Display flex is breaking material-ui grid

Question

I want to implement grid system from material-ui but facing a problem. Resizing the browser window has no effect on my grid items - they don't resize. I found out that this problem is caused by a parent div which has the style property "display": "flex".

I'm using a material-ui app-bar and drawer. Further I've built a reuseable container component for all the content and childrens. Without the style property "display": "flex" my whole page style gets broke. So how can I solve this? Any Idea?

Here is my code and the class root with the property "display": "flex"

Container.tsx

return (
        <div className={classes.root}>
            <TopBar /> // Material-UI AppBar
            <Drawer /> // Reuseable Drawer Component
            <main className={classes.contentContainer}>
                <div>{children}</div>
            </main>
        </div>
    );

Container Styles

const useStyles = makeStyles((theme: Theme) =>
createStyles({
    contentContainer: {
        flexGrow: 1,
        marginTop: 63,
        position: 'relative',
        backgroundColor: colors.whiteB_8,
        height: `calc(100vh - 63px)`,
        // padding: theme.spacing(3),
        '& > div:first-child': {
            padding: `calc(${theme.spacing(1)}px + 35px)`,
        },
    },
    root: {
        display: 'flex',
    },
}),

);

Then I can pass any component to this Container. Here my example component, where I want to have 3 columns inside my content container:

return (
    <Grid container item xs={12} spacing={2}>
        <Grid item xs={4}>
            <Paper
                style={{ backgroundColor: 'grey' }}
            >
                Test
            </Paper>
        </Grid>
        <Grid item xs={4}>
            <Paper
                style={{ backgroundColor: 'grey' }}
            >
                Test
            </Paper>
        </Grid>
        <Grid item xs={4}>
            <Paper
                style={{ backgroundColor: 'grey' }}
            >
                Test
            </Paper>
        </Grid>
    </Grid>
);

The output looks like this:

And the items are not resized:

If I remove "display": "flex" it looks like this - the content is below the drawer:

Answer 1

I can't specifically recreate your issue, but I have a feeling if you add width: '100%' with the display: 'flex' that you say is breaking, it may help with the resizing, as currently the flexbox has no defined width, and so it is just going to shrink and fit to the components inside of it, but not shrink any further when you make the window smaller. As long as you define the width as some relative amount, either % or vw , it should shrink the content inside.