diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
index 05a39ea727..10528b36a1 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
@@ -90,16 +90,13 @@ limitations under the License.
        */
     overflow-x: auto;
 
-    /* XXX: Hack: apparently if you try to nest a flex-box
-     * within a non-flex-box within a flex-box, the height
-     * of the innermost element gets miscalculated if the
-     * parents are both auto.  Height has to be auto here
-     * for RoomView to correctly fit when the Toolbar is shown.
-     * Ideally we'd launch straight into the RoomView at this
-     * point, but instead we fudge it and make the middlePanel
-     * flex itself.
-     */
     display: flex;
+
+    /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
+       needed height 100% all the way down to the HomePage. Height does not
+       have to be auto, empirically.
+    */
+    height: 100%;
 }
 
 .mx_MatrixChat .mx_RightPanel {
diff --git a/src/skins/vector/css/vector-web/structures/_HomePage.scss b/src/skins/vector/css/vector-web/structures/_HomePage.scss
index 11040c4b9c..e2af399d4a 100644
--- a/src/skins/vector/css/vector-web/structures/_HomePage.scss
+++ b/src/skins/vector/css/vector-web/structures/_HomePage.scss
@@ -18,6 +18,8 @@ limitations under the License.
 .mx_HomePage {
     max-width: 960px;
     width: 100%;
+    height: 100%;
+    overflow-y: hidden;
     margin-left: auto;
     margin-right: auto;
 }