Flexbox垂直溢出问题
我正在尝试使用flexbox为布局创建FreeCodeCamp的投资组合页面，但我在垂直溢出方面遇到了问题。 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>© 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"的flex-item子项现在已经溢出。 我对flexbox很陌生，所以我可能在这里做一些愚蠢的事情，但我无法弄清楚它是什么。
链接到codepen
这应该是最适合你的解决方案。
如果你希望你的标题的高度是相对的，那么你将不得不使用jquery，否则你可以设置一个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需要调整内容的margin-top（需要jQuery）
$(document).ready(function() {
$('#content').css('margin-top', $('#top-1').height() + 'px');
});
http://codepen.io/Rohithzr/pen/PNKmwb
链接地址: http://www.djcxy.com/p/75647.html