Enhance layout with flex properties and overflow handling

Author: huangwtings-hub

Wireframe/style.css

@@ -15,19 +15,21 @@ body {
   font-family: Arial, sans-serif;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;  /* ← ADD THIS: ensures body is at least full viewport height */
+  min-height: 100vh;
 }
 
 /* Make main content flexible to push footer down */
 main {
   flex: 1;
   padding: 20px;
+  overflow-y: auto;
 }
 
 /* Center the page title */
 header {
   text-align: center;
   padding: 20px 20px 0;
+  flex-shrink: 0;
 }
 
 /* Layout for the articles */
@@ -62,4 +64,5 @@ footer {
   padding: 10px 20px;
   border-top: 1px solid #ccc;
   background-color: #f9f9f9;
+  flex-shrink: 0;
 }