diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index 526fa6d8ee5..bd9a13c2de7 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -471,7 +471,7 @@
       display: none;
     }
 
-    width: auto;
+    width: var(--pane-width);
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 
@@ -495,6 +495,7 @@
       margin-right: var(--spacing-column);
       flex-direction: row;
       order: var(--region-order-pane-start);
+      width: calc(var(--pane-width) + var(--spacing-column) + 1px);
     }
 
     &:where([data-position-regular='end']) {
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 97946a17f55..e2d90bed87e 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -868,6 +868,11 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             '--offset-header': typeof offsetHeader === 'number' ? `${offsetHeader}px` : offsetHeader,
             '--spacing-row': `var(--spacing-${rowGap})`,
             '--spacing-column': `var(--spacing-${columnGap})`,
+            '--pane-min-width': isCustomWidthOptions(width) ? width.min : `${minWidth}px`,
+            '--pane-max-width': isCustomWidthOptions(width) ? width.max : `calc(100vw - var(--pane-max-width-diff))`,
+            '--pane-width-custom': isCustomWidthOptions(width) ? width.default : undefined,
+            '--pane-width-size': `var(--pane-width-${isPaneWidth(width) ? width : 'custom'})`,
+            '--pane-width': `${currentWidth}px`,
             ...style,
           } as React.CSSProperties
         }
@@ -900,11 +905,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           style={
             {
               '--spacing': `var(--spacing-${padding})`,
-              '--pane-min-width': isCustomWidthOptions(width) ? width.min : `${minWidth}px`,
-              '--pane-max-width': isCustomWidthOptions(width) ? width.max : `calc(100vw - var(--pane-max-width-diff))`,
-              '--pane-width-custom': isCustomWidthOptions(width) ? width.default : undefined,
-              '--pane-width-size': `var(--pane-width-${isPaneWidth(width) ? width : 'custom'})`,
-              '--pane-width': `${currentWidth}px`,
             } as React.CSSProperties
           }
         >