为什么GRID在DIV的外面而不在DIV的里面？

Question

我有以下代码。如您所见，Grid是嵌套信息div，但看起来像是在其外部。它应该正好在红色框的左上角。怎么了？

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

class Scene extends React.Component {
  render() {
    const mystyle = {
      backgroundColor: "DodgerBlue",
      position: "absolute",
      top: "0",
      left: "0",
      width: "10%",
      height: "10%"
    };
    const mystyle2 = {
      width: "50%",
      maxWidth: "none",
      flexBasis: "auto",
      height: "50%"
    };

    return (
      <div style={{ maxWidth: "calc(100vmin * 4 / 3)", margin: "auto" }}>
        <div style={{ border: "10px solid red" }}>
          <div style={{ paddingTop: "75%", background: "pink" }}>
            <Grid container style={mystyle}>
              <Grid item xs="1" style={mystyle2}>
                1
              </Grid>
              <Grid item xs="1" style={mystyle2}>
                2
              </Grid>
              <Grid item xs="1" style={mystyle2}>
                3
              </Grid>
              <Grid item xs="1" style={mystyle2}>
                4
              </Grid>
            </Grid>
          </div>
        </div>
      </div>
    );
  }
}
export default Scene;