I'm having trouble finding the source of what's preventing my div from being scrollable. My goal is to have three columns on the page, each independently scrollable. It was working previously, but then it lost functionality at some point that I haven't been able to identify. I have a feeling it might be a very small bug that I'm overlooking, but no luck finding it.
I've looked up multiple answers to this question and I haven't found a solution that addresses my particular problem.
https://jsfiddle.net/nx1kf07w/
Here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Title</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" />
</head>
<body>
<header>
<h1>Test Title <span class="author">by author</span></h1>
<nav>
<a>Home</a>
<a>About</a>
<a>Links</a>
<a>Projects</a>
</nav>
</header>
<main>
<section class="col-1">
<div class="article">
<h2><span class="post-date">18 Sep 22</span> Article Title</h2>
<p class="para-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quisquam ipsam sunt architecto voluptates officiis nihil eligendi harum aliquid, molestias soluta blanditiis tempora esse error, numquam delectus? Voluptates, itaque iure.</p>
</div>
</section>
</main>
</body>
</html>
CSS
html,
body {
height: 100%;
margin: 0;
padding: 0 5px 25px;
background-color: #eee;
font-family: Roboto, sans-serif;
font-size: 0.9rem;
color: #333;
font-weight: 300;
overflow: hidden;
}
/* HEADER CONTENT */
header {
padding-bottom: 5px;
}
h1 {
margin: 0;
padding: 1rem 0;
font-size: 1.1rem;
font-weight: 700;
}
.author {
font-size: 1rem;
font-weight: 300;
}
nav {
border: 2px solid #ffc800;
font-family: 'Space Mono', serif;
font-size: 0.9rem;
text-align: center;
word-spacing: 1rem;
}
nav a {
color: #333;
border: 1px solid transparent;
text-decoration: none;
}
/* MAIN BODY CONTENT */
main {
display: grid;
grid-template-columns: minmax(25rem, 1fr) minmax(25rem, 1fr) minmax(25rem, 1fr);
column-gap: 1rem;
}
.col-1 {
grid-column: 1;
overflow-y: auto;
}
.col-2 {
grid-column: 2;
overflow-y: auto;
}
.col-3 {
grid-column: 3;
overflow-y: auto;
}
.about {
font-size: 1rem;
}
h2 {
font-family: Bitter, serif;
font-size: 1rem;
font-weight: 300;
}
h2 a {
color: #333;
text-decoration: none;
border: 1px solid transparent;
}
.post-date {
font-family: 'Space Mono', serif;
font-size: 0.6rem;
vertical-align: super;
}
.para-1 {
margin: 0;
font-family: Anton, sans-serif;
font-size: 1.25rem;
font-weight: 500;
text-indent: 5%;
}
p:not(.para-1),
ul {
font-family: 'Space Mono', serif;
}
/* OTHER */
a:hover {
border: 1px solid purple;
}
b:hover {
font-family: Anton, sans-serif;
}
i:hover {
font-family: Bitter, serif;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Any help is always appreciated!