diff --git a/.stylelintrc.js b/.stylelintrc.js
index 723f092412cc..e610dc6269d2 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -36,7 +36,7 @@ module.exports = {
         'shorthand-property-no-redundant-values': true,
         'string-no-newline': true,
         'time-min-milliseconds': 100,
-        'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
+        'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
         'value-keyword-case': 'lower',
     },
     extends: [
diff --git a/packages/cashier/src/components/page-container/page-container.tsx b/packages/cashier/src/components/page-container/page-container.tsx
index ae572f2ec6c1..deed962667dc 100644
--- a/packages/cashier/src/components/page-container/page-container.tsx
+++ b/packages/cashier/src/components/page-container/page-container.tsx
@@ -23,7 +23,7 @@ const PageContainer: React.FC<React.PropsWithChildren<TProps>> = observer(
                 {!is_loading && (
                     <div className='page-container__content'>
                         {!is_mobile && left && <div className='page-container__sidebar--left'>{left}</div>}
-                        <ThemedScrollbars className='page-container__main'>
+                        <ThemedScrollbars className='page-container__main' height='calc(100svh - 4rem)'>
                             {!hide_breadcrumb && <CashierBreadcrumb />}
                             {is_mobile && left && <div className='page-container__sidebar--left'>{left}</div>}
                             {children}