Struggling to design a portfolio page for FreeCodeCamp using flexbox layout due to vertical overflow issues. Here is 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><a href="#about">ABOUT</a></li>
<li><a href="#projects">PORTFOLIO</a></li>
<li><a href="#contact">CONTACT</a></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>
<!-- more project articles here -->
</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);
/* Styles continue below... */
In order to make the page "flex" and have main fill the space between the header and footer while keeping them sticky, if I set height:100%; on the top div, there's an overflow issue with the child elements of section class="projects". Without setting height:100%;, there's no overflow but the elements don't flex as intended.
Visit the CodePen link for reference.