diff --git a/css/mobile.scss b/css/mobile.scss
index f9ed04bc8e..c673779ad1 100644
--- a/css/mobile.scss
+++ b/css/mobile.scss
@@ -15,7 +15,6 @@
 		background: #fff;
 		width: 100%;
 		left: 0;
-		height: 100%;
 		top: 0;
 	}
 
diff --git a/src/components/Message.vue b/src/components/Message.vue
index f89ed67909..0531c33f06 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -274,6 +274,7 @@ export default {
 }
 
 .mail-message-body {
+	flex-grow: 1;
 	margin-bottom: 100px;
 }
 
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index f6fe0b871a..2452f3a4e4 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -83,23 +83,19 @@ export default {
 #mail-content {
 	margin-left: 30px;
 	margin-top: 2px;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
 }
 #mail-message-has-blocked-content {
 	margin-left: 8px;
 }
 
 #message-container {
-	position: relative;
-	width: 100%;
-	height: 0;
-	padding-bottom: 56.25%;
+	flex-grow: 1;
 }
 
 #message-frame {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
 	height: 100%;
 }
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 88e094a38d..14241ad1e0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -103,5 +103,7 @@ export default {
 ::v-deep #app-content #app-content-wrapper .app-content-details {
 	margin: 0 auto;
 	max-width: 900px;
+	display: flex;
+	flex-direction: column;
 }
 </style>