diff --git a/src/tests/frontend/runner.css b/src/tests/frontend/runner.css
index b751d414a..04a15016f 100644
--- a/src/tests/frontend/runner.css
+++ b/src/tests/frontend/runner.css
@@ -42,8 +42,10 @@ body {
 #mocha {
   font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   height: 100%;
-  overflow: auto;
+  min-height: 100%; /* https://css-tricks.com/preventing-a-grid-blowout/ */
   font-size:80%;
+  display: flex;
+  flex-direction: column;
 }
 
 #mocha ul {
@@ -168,6 +170,12 @@ body {
   -webkit-box-shadow: 0 1px 3px #eee;
 }
 
+#mocha-report {
+  flex: 0 1 auto;
+  overflow: auto;
+  margin: 0;
+}
+
 #mocha-report ul {
   padding: 0;
 }
@@ -188,6 +196,7 @@ body {
 }
 
 #mocha-stats {
+  flex: 0 0 auto;
   padding: 10px;
   font-size: 12px;
   margin: 0;
diff --git a/src/tests/frontend/runner.js b/src/tests/frontend/runner.js
index 621f1d2e2..620f50692 100644
--- a/src/tests/frontend/runner.js
+++ b/src/tests/frontend/runner.js
@@ -50,7 +50,7 @@ $(() => (async () => {
     });
 
     // Scroll down test display after each test
-    const mochaEl = $('#mocha')[0];
+    const mochaEl = $('#mocha-report')[0];
     runner.on('test', () => {
       mochaEl.scrollTop = mochaEl.scrollHeight;
     });