Better scroll that also works with mobile?

src/components/Home.vue

@@ -11,7 +11,7 @@
     <Popover class="popup" v-if="popoverShow" :image="popoverImage"></Popover>
     <router-link to="edit">Edit Page</router-link>
 
-    <event-page></event-page>
+    <event-page style="height: 100%; overflow: auto;"></event-page>
   </div>
 </template>
 

src/components/Popover.vue

@@ -1,9 +1,11 @@
 <template>
-  <div>
+  <div class="popover" @click="close" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
-    <div class="popover" @click="close" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
+    <div class="popover-content">
       <div class="image-container">
         <img :src="image.url" />
       </div>
+
+      <div class="other-elements"></div>
     </div>
     <div style="position: fixed; width: 100%; bottom: 2rem">
       <div style="display: block; width: max-content; margin: 0 auto;">
@@ -55,15 +57,23 @@ export default {
 
 <style lang="scss" scoped>
   .popover {
-    height: 100%;
-    width: 100%;
     position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
     background-color: rgba(0,0,0,0.7);
-    display: flex;
+
-    align-items: center;
+    &-content {
-    justify-content: center;
+      height: 100%;
-    flex-wrap: wrap;
+      // margin: 0 auto;
-    flex-direction: column;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      // flex-direction: column;
+      overflow: auto;
+    }
    
     img {
       max-height: 90vh;
@@ -74,6 +84,11 @@ export default {
       }
     }
 
+    .other-elements {
+      // height: 2000px;
+      background-color: NavajoWhite;
+    }
+
     .hover-options {
       position: relative;
       background-color: rgba(0,0,0,0.4);

src/scss/main.scss

@@ -3,6 +3,7 @@
 // @import 'bootstrap-vue/dist/bootstrap-vue.css';
 
 html, body {
+  height: 100%;
   margin: 0px;
   padding: 0px;
   line-height: 1;