diff --git a/packages/vue-components/src/Modal.vue b/packages/vue-components/src/Modal.vue
index 126d0df720..c3e2049349 100644
--- a/packages/vue-components/src/Modal.vue
+++ b/packages/vue-components/src/Modal.vue
@@ -6,7 +6,6 @@
     v-model="show"
     ssr
     :name="id"
-    classes="allow-overflow"
     :content-class="['modal-dialog', optionalModalSize, optionalCentering]"
     overlay-transition="none"
     :transition="effectClass"
@@ -27,7 +26,7 @@
         >
         </button>
       </div>
-      <div class="modal-body">
+      <div class="modal-body overflow-auto">
         <slot></slot>
       </div>
       <div v-if="hasFooter || hasOk" class="modal-footer">
@@ -127,8 +126,13 @@ export default {
 };
 </script>
 <style>
-    .allow-overflow {
-        overflow: auto;
+    .modal-dialog {
+        inset: 0;
+        position: absolute;
+    }
+
+    .modal-content {
+        max-height: 100%;
     }
 
     .modal-zoom {
diff --git a/packages/vue-components/src/__tests__/Modal.spec.js b/packages/vue-components/src/__tests__/Modal.spec.js
index bdcf51af61..43bf9eda04 100644
--- a/packages/vue-components/src/__tests__/Modal.spec.js
+++ b/packages/vue-components/src/__tests__/Modal.spec.js
@@ -88,7 +88,7 @@ describe('Modal', () => {
     // click on trigger
     await trigger.find('span.trigger-click').trigger('click');
     // then click on backdrop
-    await wrapper.find('div.allow-overflow').trigger('click');
+    await wrapper.find('div[role=dialog]').trigger('click');
 
     expect(wrapper.element).toMatchSnapshot();
   });
@@ -109,7 +109,7 @@ describe('Modal', () => {
     // click on trigger
     await trigger.find('span.trigger-click').trigger('click');
     // then click on backdrop
-    await wrapper.find('div.allow-overflow').trigger('click');
+    await wrapper.find('div[role=dialog]').trigger('click');
 
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
index 325b71e9a6..240fd9e8d9 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
@@ -27,7 +27,7 @@ exports[`Modal can be centered 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -57,7 +57,7 @@ exports[`Modal can be centered 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -99,7 +99,7 @@ exports[`Modal can be large 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -129,7 +129,7 @@ exports[`Modal can be large 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -171,7 +171,7 @@ exports[`Modal can be small 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -201,7 +201,7 @@ exports[`Modal can be small 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -243,7 +243,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -273,7 +273,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -315,7 +315,7 @@ exports[`Modal should be closable using the ok-text button 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -331,7 +331,7 @@ exports[`Modal should be closable using the ok-text button 1`] = `
           <!---->
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -383,7 +383,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -413,7 +413,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -455,7 +455,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -485,7 +485,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -527,7 +527,7 @@ exports[`Modal should not show header when no header is given 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -543,7 +543,7 @@ exports[`Modal should not show header when no header is given 1`] = `
           <!---->
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -589,7 +589,7 @@ exports[`Modal should show footer when both footer and ok-text are given 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -605,7 +605,7 @@ exports[`Modal should show footer when both footer and ok-text are given 1`] = `
           <!---->
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -649,7 +649,7 @@ exports[`Modal supports fade effect 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -665,7 +665,7 @@ exports[`Modal supports fade effect 1`] = `
           <!---->
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>