我試圖將第二個網格項目中的最后一個項目(黃色)對齊到頁面flex-end的末尾。我嘗試了多種方法，例如設置包裝器的高度和justifySelf，但它不起作用，即使如此，我也不會靜態設置div的高度。有什么建議嗎？ 你可以在鏈接& amp以下代碼:

import React from "react";
import Grid from "@material-ui/core/Grid";

export default function NestedGrid() {
  return (
    <Grid container style={{ backgroundColor: "yellow" }}>
      <Grid item container>
        <div style={{ backgroundColor: "blue", width: "100%" }}>item</div>
      </Grid>
      <Grid item container direction={"column"} style={{ display: "flex" }}>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div style={{ justifySelf: "end", marginTop: "auto" }}>item</div>
      </Grid>
    </Grid>
  );
}

CodeSanbox鏈接

試試這個:

import React from "react";
import Grid from "@material-ui/core/Grid";

export default function NestedGrid() {
  return (
    <Grid container style={{ backgroundColor: "yellow", height: '100vh'}}>
      <Grid item container>
        <div style={{ backgroundColor: "blue", width: "100%" }}>item</div>
      </Grid>
      <Grid item container direction={"column"} 
      style={{height: '100%',
        justifyContent:'start'}}
        >
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div style={{marginTop: 'auto'}}>item</div>
      </Grid>
    </Grid>
  );
}