Don't clip editor_area bg when scrollbar appears.

Instead of applying the background-color to the holder, apply it to the editor
area and message area separately. Then they can flex differently so that
the editor always maintains full height, and the message area shrinks to
a minimum of 30px.

frontends/etiquette_flask/templates/photo.html

@@ -32,18 +32,34 @@
     flex-direction: column;
 
     max-width: 300px;
-    padding: 8px;
+    /*padding: 8px;*/
 
-    background-color: rgba(0, 0, 0, 0.1);
 }
 #editor_area
 {
     flex: 3;
+    padding: 8px;
+
+    background-color: rgba(0, 0, 0, 0.1);
+
     word-wrap: break-word;
 }
+#message_area_bg
+{
+    display: flex;
+    flex: 0 1 100%;
+
+    height: 100%;
+    min-height: 30px;
+    padding: 8px;
+
+    background-color: rgba(0, 0, 0, 0.1);
+}
 #message_area
 {
     flex: auto;
+
+    max-height: none;
 }
 .photo_viewer
 {
@@ -200,10 +216,12 @@
         {% endif %}
         </ul>
     </div>
+    <div id="message_area_bg">
         <div id="message_area">
         </div>
     </div>
     </div>
+</div>
 
 <div id="right">
     <!-- THE PHOTO ITSELF -->