css - Flexbox 垂直溢出问题

Question

我正在尝试使用 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>&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%;
}

如果我不在顶部 div 上设置 height: 100%;，则不会溢出，但它似乎不会“flex ”；也就是说，main 不会填充页眉和页脚之间的空间，页眉和页脚保持粘性。如果我确实在顶部 div 上设置了 height: 100%;，如代码所示，main 会填充可用空间，但是 的 flex-item 子项section class="projects" 现在溢出了。我是 flexbox 的新手，所以我可能在这里做了一些愚蠢的事情，但我不知道它是什么。

Link to codepen

Answer 1

这应该是最适合您的解决方案。

如果您希望页眉的高度是相对的，那么您将不得不使用 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(需要jquery)

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

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