quatuorbellefeuille.com

commit 05c9daf01f4a7bb122bb81b915038582e182b9ef
parent 24c47ae95e0ab1dbf70a522351d5eb07b2880fe7
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Wed,  4 Nov 2020 00:35:49 +0100

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.

Diffstat:
M
artistes.css
 | 
20
+++++++++++++-------
M
commun.css
 | 
4
+---

2 files changed, 14 insertions(+), 10 deletions(-)
diff --git 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
@@ -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 {