ReactJS - 材质 UI - FlexGrow 不工作答案

【问题标题】：ReactJS - Material UI - FlexGrow is not workingReactJS - 材质 UI - FlexGrow 不工作
【发布时间】：2021-12-27 15:34:34
【问题描述】：

我正在尝试实现 FlexBox，但我似乎不明白如何使用 flexGrow。我尝试了以下代码，但背景只是围绕内容。

有人能指出我正确的方向吗？我正在使用 React 17.0.2 和 Material UI 库

<Box sx={{ display: "flex", flexDirection: "column" }}>
  <Navbar />
  <Box
    sx={{
      backgroundColor: "#EAECEE",
      display: "flex",
      justifyContent: "center",
      flexGrow: 1,
    }}
  >
    content
  </Box>
</Box>

<Box sx={{ display: "flex", flexDirection: "column" }}>
  <Navbar />
  <Box
    sx={{
      backgroundColor: "#EAECEE",
      display: "flex",
      justifyContent: "center",
      height: "700px",
    }}
  >
    content
  </Box>
</Box>

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

发现问题。我需要像这样向容器 Box 添加高度：

<Box sx={{ height: "100vh", display: "flex", flexDirection: "column" }}>
  <Navbar />
  <Box
    sx={{
      backgroundColor: "#EAECEE",
      display: "flex",
      justifyContent: "center",
      flexGrow: 1,
    }}
  >
    content
  </Box>
</Box>

【讨论】：