Try to make content scrollable

couldn't find a way to make #photos and #bio backgrounds extend to the
bottom of .main, for some reason.

flex-grow is necessary on .main, otherwise the footer will pick up
excess height when zoomed out.

use flex: 1/2 for #photos/#bio, instead of percentages with
flex-shrink: 0.

2 files changed, 14 insertions, 10 deletions

diff --git a/artistes.css b/artistes.css
index 2f33f7b..81006ac 100644
--- a/artistes.css
+++ b/artistes.css
@@ -1,17 +1,27 @@
+body {
+    height: 100vh;
+}
+
 .main {
     display: flex;
+    overflow: auto;
+    flex-grow: 1;
 }
 
 .main div {
     padding: 2%;
 }
 
-#photos {
-    width: 30%;
-    flex-shrink: 0;
+.main #photos {
+    flex: 1;
     background: #eee;
 }
 
+.main #bio {
+    flex: 2;
+    background: #bbb;
+}
+
 #photos img {
     width: 40%;
     border-color: #ddd;
@@ -25,7 +35,3 @@
 #photos img:hover {
     filter: none;
 }
-
-#bio {
-    background: #bbb;
-}
diff --git a/commun.css b/commun.css
index 9b52d45..16531a9 100644
--- a/commun.css
+++ b/commun.css
@@ -34,15 +34,13 @@ nav ol li {
 }
 
 body {
-    height: 100%;
     display: flex;
     flex-direction: column;
     margin: 0;
 }
 
 .main {
-    flex-grow: 1;
-    background: #ccc;
+    background: #f00;
 }
 
 footer {