diff --git a/src/components/modal/examples/Modal.vue b/src/components/modal/examples/Modal.vue
index 2dee9d59e..d8a970af7 100644
--- a/src/components/modal/examples/Modal.vue
+++ b/src/components/modal/examples/Modal.vue
@@ -75,6 +75,7 @@
     <async-modal />
     <br />
     <long-modal />
+    <div class="spacer" />
   </div>
 </template>
 
@@ -113,4 +114,8 @@ export default {
     min-height: 80vh; /* fixes a safari display bug */
   }
 }
+
+.spacer {
+  height: 100vh;
+}
 </style>
diff --git a/src/components/modal/styles/CdrModal.module.scss b/src/components/modal/styles/CdrModal.module.scss
index 563550beb..e5fb6e116 100644
--- a/src/components/modal/styles/CdrModal.module.scss
+++ b/src/components/modal/styles/CdrModal.module.scss
@@ -10,7 +10,7 @@ $modal-animation-duration: 150ms;
   }
 
   inset: 0;
-  height: 100vh;
+  height: 100%;
   overflow-y: scroll;
   position: fixed;
   visibility: visible;
@@ -151,4 +151,7 @@ $modal-animation-duration: 150ms;
   overflow: hidden !important;
   position: fixed !important;
   width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
 }