[data grid] Adding border to grid main element causes infinite rerender

[cherniavskii]

Demo: https://codesandbox.io/s/data-grid-community-forked-3ctumy

• flex container
• border on the .MuiDataGrid-main
• container height so big that the table doesn't have a vertical scroll

(this one can be fixed by moving the border from main container element to root)

Originally posted by @Deraen in #8447 (comment)

[cherniavskii]

I cannot reproduce it in v5: https://codesandbox.io/s/data-grid-community-forked-7rtqzc?file=/src/App.tsx

[cherniavskii]

#8577 fixes it, but with a side-effect of horizontal scroll bar:
https://codesandbox.io/s/data-grid-community-forked-b8d17d

[cherniavskii]

The issue seems to come from the fact that we use offsetWidth (which includes a border), but do not subtract border width from it:

mui-x/packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts

Lines 226 to 237 in aba4549

	const width = mainEl.offsetWidth || 0;
	const win = ownerWindow(mainEl);
	const computedStyle = win.getComputedStyle(mainEl);
	const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
	const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
	const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
	const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
	const newHeight = height - paddingTop - paddingBottom;
	const newWidth = width - paddingLeft - paddingRight;

We can use clientWidth instead, as it doesn't include border width.
Same applies to the height.

[lroos]

I've run into a related issue with the upgrade to v6 (6.2.0) - the horizontal scrollbar appears while scrolling the list. I forked a demo sandbox here to illustrate.
https://codesandbox.io/s/sparkling-waterfall-3sdhkk?file=/demo.tsx
Only seems to happen when

• border on .MuiDataGrid-main
• at least 1 column is has flex: 1

Also if you set the Box to display: 'flex' then the whole grid slowly grows horizontally, as shown in #8447 which is trippy.

[Luv-m]

Hello :),

Also if you set the Box to display: 'flex' then the whole grid slowly grows horizontally, as shown in #8447 which is trippy.

I still see this issue in 6.8.0. Is your fix going to go in the next release @cherniavskii ?