datagrid突然扩展了它们的父类，以便在没有水平滚动条的情况下完全容纳它们

Question

我最初认为我已经打破了一些东西，但是在对更简单的模型进行多次测试之后，我现在意识到这不是我，而是MUI v6，事实上，改变了关于DataGrids Pro的显示的一些东西，其中包括具有minWidth属性的列。

我在一家公司工作，我们使用多个datagrid，其中包括许多列与minWidth属性。列是如此之多，以至于它们很容易被推到视窗外，但这并没有发生，因为它们在容器内。因此，datagrid具有水平滚动条。

然而，当我升级到MUI datagrid Pro v6时，所有这些datagrid突然扩展了它们的父类，以适应它们在没有水平滚动条的情况下的全部容量。这些数据网格是"width: "100%""的容器的子节点。

我已经创建了一个简化的模型，你可以很容易地检查和比较。只要确保有许多列，都具有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%。

,

我知道有一些变通方法，但它们并不完全相同:

1. 使用flex代替minWidth。是的，它们将适合，但它看起来不一样，特别是当有20+列时。

2. 使用vw或px值限制宽度。这在表面上是可行的，但它失去了一些调整大小和在其他组件(如accordion)中放置数据网格的灵活性。当列最初固定时，还存在另一个闪烁问题:当用户改变其中一列的宽度并将其设置为特定值时，数据网格开始在两个宽度之间振荡，从而产生一种闪烁效果。

我觉得问题很简单，但在这一点上我只是觉得愚蠢，不知道为什么DataGrid v6和v5之间有区别。谢谢大家的帮助!

Answer 1

我使用overflow: 'hidden'作为父类以使其在v6中工作。我也遇到过同样的问题。

。

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