Material UI嵌套Grid的Item未占满可用宽度且缩小时UI损坏如何解决

我在使用Material UI的嵌套Grid系统时，遇到Grid Item仅占用固定宽度、剩余可用空间留白的问题。当可用空间不足以容纳该固定宽度时，组件不会挤压内部空闲空间，反而直接导致UI布局损坏。

相关截图（拍摄环境：Google Chrome） #

代码片段 #

外层Grid代码 #

<Grid container justifyContent="space-evenly" direction={isMd ? "row" : "column"}>
  <Grid item sx={{ minWidth: "300px" }}>
    <Typography>Component coming soon</Typography>
  </Grid>
  <Grid item component={Footer2}></Grid>
</Grid>

内层Grid代码 #

<Grid
  container
  justifyContent="space-evenly"
  direction={isMd ? "row" : "column"}
  gap={6}
>
  <Grid item links={["COMPANY", "About", "Experts and Spokesmodels"]}>
    <Listings
      links={["COMPANY", "About", "Experts and Spokesmodels"]}
    ></Listings>
  </Grid>
  <Grid item>
    <Listings
      links={[
        "CUSTOMER SERVICE",
        "Contact Us",
        "My Account",
        "Store Locator",
        "Redeem Rewards"
      ]}
    ></Listings>
  </Grid>
  <Grid item>
    <Listings
      links={[
        "MORE TO EXPLORE",
        "Beauty Magazine",
        "Tools and Consultations",
        "Offers",
        "#LorealParis"
      ]}
    ></Listings>
  </Grid>
</Grid>

内容的提问来源于stack exchange，提问作者Julia Anderson