Flexbox vertical overflow issue - css

Question

I am trying to create a portfolio page for FreeCodeCamp using flexbox for the layout, but I'm having trouble with vertical overflow. The HTML:
<div class="flex-container flex-column top">
<header class="flex-container">
<h1 class="logo"><i class="fa fa-hashtag"></i>DubDev</h1>
<nav>
<ul>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<main class="flex-container">
<a name="about"></a>
<section class="about">
<h2>About Me</h2>
</section>
<a name="project"></a>
<section class="projects flex-container">
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
<article class="card flex-container flex-column">
<img src="http://fpoimg.com/300x250">
<div class="card-title">
<h2>Project 1</h2>
</div>
</article>
</section>
<a name="contact"></a>
<section class="contact">
<h2>Contact Me </h2>
</section>
</main>
<footer class="flex-container">
<p>© 2016 Dubrick Development<p>
</footer>
</div>
The CSS:
#import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
#import url(https://fonts.googleapis.com/css?family=Droid+Serif:700);
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html, body {
height: 100%;
}
footer, header {
font-family: "Passion One", sans-serif;
font-weight: 400;
background: #1abc9c;
color: white;
width: 100%;
/* flex: 0 0 75px; */
}
footer, header > * {
padding: 0 5px 0 5px;
}
footer {
box-shadow:4px -4px 0 rgba(0,0,0,0.1);
justify-content: center;
align-items: center;
font-size: 18px;
}
header {
box-shadow:4px 4px 0 rgba(0,0,0,0.1);
}
main {
flex-wrap: wrap;
overflow-y: auto;
background-color: #909AA1;
justify-content: center;
position: relative;
flex: 0 1 auto;
}
nav {
flex: 1;
align-self: center;
text-align: right;
padding-right: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
font-size: 36px;
padding: 10px;
transition: background-color 0.5s ease;
}
nav ul li:hover {
background-color: rgba(0,0,0,0.2);
}
nav ul li a {
color: white;
text-decoration: none;
}
.about {
flex-basis: 1000px;
}
.card {
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
flex-basis: 300px;
height: 300px;
margin: 10px;
align-items: center;
}
.card > img {
flex-basis: 250px;
}
.card .card-title {
background-color: white;
flex: 1;
align-self: stretch;
text-align: center;
font-family: "Droid Serif";
}
.flex-container {
display: flex;
}
.flex-column {
flex-direction: column;
}
.logo {
padding: 5px;
border-radius: 5px;
border: 1px solid white;
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
}
.projects {
flex: 0 1 1000px;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
padding-bottom: 20px;
background-color: #D8DBDE;
max-height: 100%;
}
.contact {
flex-basis: 1000px;
}
.top {
height: 100%;
}
If I don't set height: 100%; on the top div, there is no overflow, but it doesn't seem to "flex"; that is, main does not fill the space between the header and footer with the header and footer remaining sticky. If I do set height: 100%; on the top div, as shown in the code, main fills the available space, but the flex-item children of section class="projects" now overflow. I'm very new to flexbox, so I'm probably doing something stupid here, but I can't figure out what it is.
Link to codepen

Answer 1

This should be the most apt-solution for you.
if you want your header's height to be relative then you will have to use jquery else you can just set a margin-top: 90px; to #content
new css required
.content{
position: relative;
}
#top-1 {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
margin: 0;
}
small js required to adjust content's margin-top (jquery required)
$(document).ready(function() {
$('#content').css('margin-top', $('#top-1').height() + 'px');
});
http://codepen.io/Rohithzr/pen/PNKmwb