diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
index 85017686850e..e56f110f2ff6 100644
--- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -177,6 +177,42 @@ describe('<DataGridPro /> - Columns', () => {
       });
     });
 
+    it('should work with pinned rows', () => {
+      render(
+        <Test
+          {...baselineProps}
+          pinnedRows={{
+            top: [{ id: 'top-0', brand: 'Reebok' }],
+            bottom: [{ id: 'bottom-0', brand: 'Asics' }],
+          }}
+        />,
+      );
+      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+      const nonPinnedCell = getCell(1, 0);
+      const columnHeaderCell = getColumnHeaderCell(0);
+      const topPinnedRowCell = document.querySelector(
+        `.${gridClasses['pinnedRows--top']} [role="cell"][data-colindex="0"]`,
+      );
+      const bottomPinnedRowCell = document.querySelector(
+        `.${gridClasses['pinnedRows--bottom']} [role="cell"][data-colindex="0"]`,
+      );
+
+      fireEvent.mouseDown(separator, { clientX: 100 });
+      fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 });
+
+      expect(columnHeaderCell).toHaveInlineStyle({ width: '150px' });
+      expect(nonPinnedCell).toHaveInlineStyle({ width: '150px' });
+      expect(topPinnedRowCell?.getBoundingClientRect().width).to.equal(150);
+      expect(bottomPinnedRowCell?.getBoundingClientRect().width).to.equal(150);
+
+      fireEvent.mouseUp(separator);
+
+      expect(columnHeaderCell).toHaveInlineStyle({ width: '150px' });
+      expect(nonPinnedCell).toHaveInlineStyle({ width: '150px' });
+      expect(topPinnedRowCell?.getBoundingClientRect().width).to.equal(150);
+      expect(bottomPinnedRowCell?.getBoundingClientRect().width).to.equal(150);
+    });
+
     describe('flex resizing', () => {
       before(function beforeHook() {
         if (isJSDOM) {
diff --git a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts b/packages/grid/x-data-grid-pro/src/utils/domUtils.ts
index cc668475c4f6..697c10999dee 100644
--- a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts
+++ b/packages/grid/x-data-grid-pro/src/utils/domUtils.ts
@@ -28,13 +28,12 @@ export function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateAp
   const colIndex = Number(ariaColIndex) - 1;
   const cells: Element[] = [];
 
-  const virtualScrollerContent = api.virtualScrollerRef?.current?.firstElementChild;
-  if (!virtualScrollerContent) {
+  if (!api.virtualScrollerRef?.current) {
     return [];
   }
 
-  const renderedRowElements = virtualScrollerContent.querySelectorAll(
-    `:scope > div > .${gridClasses.row}`, // Use > to ignore rows from detail panels
+  const renderedRowElements = api.virtualScrollerRef?.current.querySelectorAll(
+    `:scope > div > div > .${gridClasses.row}`, // Use > to ignore rows from nested data grids (e.g. in detail panel)
   );
 
   renderedRowElements.forEach((rowElement) => {