From f312a2f9f0f1bed735e85a087d95f229d264d671 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=9E=E5=8F=AF=20=C2=B7=20YU=20KE?= <1798456934@qq.com>
Date: Sat, 29 Aug 2026 15:52:00 +0800
Subject: [PATCH] fix(@vben/common-ui): keep auto-height Page from clamping
 outer flex layout (#8323)

When the layout footer is enabled and not fixed, LayoutContent is a flex
item of the scroll container with min-height:auto. An auto-content-height
Page then feeds its inner content's min-content height back into that
automatic minimum, so the content region gets clamped taller than the
available space on first render: the layout footer is pushed below the
viewport and the page's own scrollbar only appears after switching tabs
(the KeepAlive remount breaks the feedback loop). See #5677.

Apply size containment to the Page content region in auto-content-height
mode so it no longer contributes min-content height to the outer flex
layout; the region manages its own scrolling there by design.
---
 packages/effects/common-ui/src/components/page/page.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
index 8d7be8e71..f99efee8f 100644
--- a/packages/effects/common-ui/src/components/page/page.vue
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -24,6 +24,12 @@ const contentStyle = computed<StyleValue>(() => {
 
   return {
     '--page-content-height-offset': `${heightOffset}px`,
+    // In auto-content-height mode the content region manages its own scrolling.
+    // Size containment prevents the inner content's min-content height from
+    // feeding back into the outer flex layout, which would clamp the content
+    // region taller than the available space and push the layout footer below
+    // the viewport (see https://github.com/vbenjs/vue-vben-admin/issues/5677).
+    contain: 'size',
     marginBlockEnd: 'var(--page-content-height-offset)',
   };
 });