Проблема вертикального переполнения Flexbox

Question

Я пытаюсь создать страницу портфолио для FreeCodeCamp, используя flexbox для макета, но у меня возникают проблемы с вертикальным переполнением. 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> 
    <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>&copy; 2016 Dubrick Development<p> 
    </footer> 
</div> 

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%; 
} 

Если я не ставлю height: 100%; на верхнем DIV, нет переполнения, но это, кажется, не "прогибается"; то есть main не заполняет пространство между верхним и нижним колонтитулом, а верхний и нижний колонтитулы остаются липкими. Если я установил height: 100%; в верхнем div, как показано в коде, main заполняет доступное пространство, но дети с гибкими деталями section class="projects" теперь переполняются. Я очень новичок в flexbox, поэтому я, наверное, занимаюсь чем-то глупым, но я не могу понять, что это такое.

Link to codepen

Answer 1

Это должно быть наиболее удачным-решением для вас.

Если вы хотите, чтобы высота вашего заголовка была относительной, вам придется использовать jquery else, вы можете просто установить margin-top: 90px; в #content

новый CSS требуется

.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; 
} 

небольшие JS, необходимые для регулировки маржи-топ содержание (в JQuery требуется)

$(document).ready(function() { 
     $('#content').css('margin-top', $('#top-1').height() + 'px'); 
}); 

http://codepen.io/Rohithzr/pen/PNKmwb