ReactJS - 材質 UI - FlexGrow 不工作

Question

我正在嘗試實現 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>

Answer 1

發現了問題。 我需要像這樣向容器 Box 添加高度：

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