From 05c9daf01f4a7bb122bb81b915038582e182b9ef Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Wed, 4 Nov 2020 00:35:49 +0100
Subject: 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.
---
 artistes.css | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

(limited to 'artistes.css')

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;
-}
-- 
cgit v1.2.3