Struggling to implement the grid system from material-ui due to an issue where grid items do not resize when resizing the browser window. The culprit seems to be a parent div with the style property "display": "flex".
The dilemma arises from using a material-ui app-bar and drawer, as well as creating a reusable container component for all content and children. Removing the style property "display": "flex" leads to a broken page style. How can this conundrum be solved?
Below is my code snippet showcasing the class root with the property "display": "flex".
Container.tsx
return (
<div className={classes.root}>
<TopBar /> // Material-UI AppBar
<Drawer /> // Reusable 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)`,
'& > div:first-child': {
padding: `calc(${theme.spacing(1)}px + 35px)`,
},
},
root: {
display: 'flex',
},
}),
);
To illustrate, here is an example component containing three columns inside the 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 displayed output does not show resized items despite efforts to rectify the issue.
If the "display": "flex" style is removed, the consequence is shown in the image below with the content positioned beneath the drawer link: