diff --git a/esphomeyaml/dashboard/static/esphomeyaml.css b/esphomeyaml/dashboard/static/esphomeyaml.css
index 7693bab5eb..42f8cbba73 100644
--- a/esphomeyaml/dashboard/static/esphomeyaml.css
+++ b/esphomeyaml/dashboard/static/esphomeyaml.css
@@ -32,6 +32,26 @@ i.very-large {
   padding-bottom: 10px;
 }
 
+.inlinecode {
+  box-sizing: border-box;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27,31,35,0.05);
+  border-radius: 3px;
+  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
+}
+
+.autoscroll {
+  display: flex;
+  flex-direction: column-reverse;
+  flex-basis: auto;
+}
+
+.autoscroll div {
+  flex-basis: 100%;
+}
+
 .log {
   background-color: #1c1c1c;
   margin-top: 0;
@@ -47,16 +67,6 @@ i.very-large {
   color: #DDD;
 }
 
-.inlinecode {
-  box-sizing: border-box;
-  padding: 0.2em 0.4em;
-  margin: 0;
-  font-size: 85%;
-  background-color: rgba(27,31,35,0.05);
-  border-radius: 3px;
-  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
-}
-
 .log-bold { font-weight: bold; }
 .log-italic { font-style: italic; }
 .log-underline { text-decoration: underline; }
diff --git a/esphomeyaml/dashboard/templates/index.html b/esphomeyaml/dashboard/templates/index.html
index cf80cc0e2a..30adeffb2b 100644
--- a/esphomeyaml/dashboard/templates/index.html
+++ b/esphomeyaml/dashboard/templates/index.html
@@ -91,10 +91,14 @@
 </div>
 
 <div id="modal-logs" class="modal modal-fixed-footer">
-  <div class="modal-content">
-    <h4>Show Logs <code class="inlinecode filename"></code></h4>
-    <div class="log-container">
-      <pre class="log"></pre>
+  <div class="modal-content autoscroll">
+    <div>
+      <h4>Show Logs <code class="inlinecode filename"></code></h4>
+      <div>
+        <div class="log-container">
+          <pre class="log"></pre>
+        </div>
+      </div>
     </div>
   </div>
   <div class="modal-footer">
@@ -103,10 +107,12 @@
 </div>
 
 <div id="modal-upload" class="modal modal-fixed-footer">
-  <div class="modal-content">
-    <h4>Compile And Upload <code class="inlinecode filename"></code></h4>
-    <div class="log-container">
-      <pre class="log"></pre>
+  <div class="modal-content autoscroll">
+    <div>
+      <h4>Compile And Upload <code class="inlinecode filename"></code></h4>
+      <div class="log-container">
+        <pre class="log"></pre>
+      </div>
     </div>
   </div>
   <div class="modal-footer">
@@ -119,10 +125,12 @@
 </div>
 
 <div id="modal-compile" class="modal modal-fixed-footer">
-  <div class="modal-content">
-    <h4>Compile <code class="inlinecode filename"></code></h4>
-    <div class="log-container">
-      <pre class="log"></pre>
+  <div class="modal-content autoscroll">
+    <div>
+      <h4>Compile <code class="inlinecode filename"></code></h4>
+      <div class="log-container">
+        <pre class="log"></pre>
+      </div>
     </div>
   </div>
   <div class="modal-footer">
@@ -440,10 +448,12 @@
 </div>
 
 <div id="modal-clean-mqtt" class="modal modal-fixed-footer">
-  <div class="modal-content">
-    <h4>Clean MQTT discovery <code class="inlinecode filename"></code></h4>
-    <div class="log-container">
-      <pre class="log"></pre>
+  <div class="modal-content autoscroll">
+    <div>
+      <h4>Clean MQTT discovery <code class="inlinecode filename"></code></h4>
+      <div class="log-container">
+        <pre class="log"></pre>
+      </div>
     </div>
   </div>
   <div class="modal-footer">
@@ -452,10 +462,12 @@
 </div>
 
 <div id="modal-clean" class="modal modal-fixed-footer">
-  <div class="modal-content">
-    <h4>Clean Build Files <code class="inlinecode filename"></code></h4>
-    <div class="log-container">
-      <pre class="log"></pre>
+  <div class="modal-content autoscroll">
+    <div>
+      <h4>Clean Build Files <code class="inlinecode filename"></code></h4>
+      <div class="log-container">
+        <pre class="log"></pre>
+      </div>
     </div>
   </div>
   <div class="modal-footer">