Display flex 正在破坏 material-ui 网格

Question

我想从 material-ui 实​​现网格系统，但遇到了一个问题。调整浏览器窗口的大小对我的网格项目没有影响——它们不会调整大小。我发现这个问题是由具有样式属性“display”：“flex”的父div引起的。

我正在使用 material-ui 应用栏和抽屉。此外，我为所有内容和子项构建了一个可重用的容器组件。如果没有样式属性“display”：“flex”，我的整个页面样式都会被破坏。那么我该如何解决呢？有什么想法吗？

这是我的代码和具有属性“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>
    );

容器样式

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',
    },
}),

);

然后我可以将任何组件传递给这个容器。这是我的示例组件，我想在内容容器中包含 3 列：

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

输出如下：

并且项目没有调整大小：

如果我删除 "display": "flex" 它看起来像这样 - 内容在抽屉下面：

Answer 1

我无法专门重新创建您的问题，但我有一种感觉，如果您添加 width: '100%' 和您所说的破坏的 display: 'flex'，它可能有助于调整大小，因为目前 flexbox 没有定义宽度，因此它只会缩小并适合其中的组件，但当您缩小窗口时不会进一步缩小。只要您将宽度定义为某个相对量，% 或 vw，它应该会缩小里面的内容。