我最初認為我破壞了一些東西，但是在對更簡單的模型執行了多次測試之后，我現在意識到實際上并不是我，而是MUI v6改變了DataGrids Pro的顯示，它包含了具有minWidth屬性的列。

我在一家公司工作，在那里我們使用多個數據網格，包括許多具有minWidth屬性的列。列是如此之多，以至于它們很容易被推到視口之外，但是這并沒有發生，因為它們在容器內部。因此，數據網格有水平滾動條。

然而，當我升級到MUI DataGrids Pro v6時，所有這些數據網格都突然擴展了它們的父網格，以便在沒有水平滾動條的情況下完全容納它們。這些數據網格是帶有& quot寬度:& quot100% & quot；"。

我已經創建了一個簡化的模型，你可以很容易地檢查和比較。只要確保有很多列，都有minWidth屬性，并且@mui/material是5.11.15版本。

<Box
      sx={{
        display: "flex",
        flexDirection: "row",
        height: 520,
        width: "100%",
      }}
    >
      <Box
        sx={{
          width: "100%",
          backgroundColor: "#fff",
        }}
      >
        <DataGridPro rows={rows} columns={columns} />
      </Box>
      <Box
        sx={{
          width: "100%",
          backgroundColor: "#fff",
        }}
      >
        <DataGridPro rows={rows} columns={columns} />
      </Box>
    </Box>

在5.15.0版的Data Grid Pro中，它將如下所示: V5

在6.0.3版的Data Grid Pro中，它將如下所示: V6

在v6中，由于有兩個相鄰的數據網格，它們填充了相當于兩個屏幕的空間，因為它們的父網格是width: 100%。

還有，

我知道有一些變通辦法，但它們并不完全相同:

使用flex而不是minWidth。是的，它們會適合，但看起來不一樣，尤其是當有20+列時。

使用vw或px值限制寬度。這在表面上是可行的，但在其他組件(如手風琴)中，它失去了調整數據網格大小和放置數據網格的靈活性。當最初鎖定一列時，某種閃爍還有另一個問題:當用戶更改其中一列的寬度并將其設置為特定值時，數據網格開始在兩個寬度之間擺動，產生某種閃爍效果。

我覺得這個問題很簡單，但是在這一點上我只是覺得很愚蠢，不知道為什么DataGrid v6和v5之間有區別。 謝謝大家的幫助！

我對父節點使用了溢出:“隱藏”以使其適用于v6。我遇到了同樣的問題。

例如

<Box sx={{overflow: 'hidden'}}>
   <DataGridPro rows={rows} columns={columns} />
</Box>