Fix scrolling styles with CSS grid

styles/sass/style.scss

@@ -43,11 +43,19 @@ input[type=number] {
 #content {
   width: 100%;
   height: 100%;
-  display: flex;
+
-  flex-direction: column;
+  display: grid;
+  grid-template-areas:
+    "nav        nav"
+    "challenge  submissions";
+  grid-template-columns: 30em auto;
+  grid-template-rows: min-content auto;
+
   overflow: hidden;
 
   nav {
+    grid-area: nav;
+
     --bg: #{$fg};
     --fg: #{$bg};
     background: var(--bg);
@@ -98,16 +106,12 @@ input[type=number] {
     }
   }
 
-  & > div:first-of-type {
+  & > div {
-    display: flex;
-    height: 100%;
-    & > :first-child {
-      min-width: 40em;
-      padding: 1em;
-    }
-    & > * {
     overflow: scroll;
   }
+
+  #challenge {
+    padding: 1em;
   }
 }
 
@@ -116,9 +120,8 @@ input[type=number] {
 }
 
 #submissions {
-  display: flex;
+  grid-area: submissions;
-  flex-direction: column;
+
-  height: calc(100% - 2em);
   background: rgba(0, 0, 0, 0.125);
   $gap: 0.5em;
   padding: $gap;

templates/index.html.tera

@@ -64,8 +64,7 @@
                 </nav>
             </a>
         </nav>
-        <div>
+        <div id="challenge">
-            <div>
             <h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
             {% if content.japanese %}
             <div lang="ja">
@@ -151,6 +150,5 @@
             </div>
         </div>
     </div>
-    </div>
 </body>
 </html>