Prevent flexbox items from overflowing into siblings - html

Question

I am trying to make a one-pager site, which is working quite well. I have three sections that need to be fullscreen, that works. But when I resize the window to 500px width and make the height also shorter, the title from the second page comes up on the first page. Same thing happens with the title on the third page, this one displays on the second page.
Here is the codepen: http://codepen.io/anon/pen/jWaxMK
HTML:
<section>
<h2>Title 1</h2>
<div class="box">
</div>
<div class="box">
</div>
</section>
<section>
<h2 class="blue">Title 2</h2>
<div class="box circle"></div>
<div class="box circle"></div>
<div class="box circle"></div>
</section>
<section>
<h2 class="white">Title 3</h2>
</section>
CSS:
html,
body,main {
height: 100%;
margin: 0;
padding: 0;
}
section {
position: relative;
width: 100%;
height: 100%;
color: #ececec;
text-align: center;
display: flex; /* default: row nowrap */
flex-flow:row wrap;
justify-content: center;
align-items: center;
align-content: center;
}
section:nth-child(1) {
background: #06a2cb;
}
section:nth-child(2) {
background: #ececec;
}
section:nth-child(3) {
background: #F5E5D8;
}
h2{
margin-top:0;
font-family: 'Lobster';
margin: 1em;
flex: 0 0 100%;
color: black;
}
.box{
width: 250px;
height: 250px;
display: inline-block;
background-color: #ececec;
border-radius: 10px;
flex: 0 0 250px;
}
.circle{
border-radius: 50%;
background-color: white;
}
Any help is appreciated, thanks!

Answer 1

You can solve the problem by making all the section elements flex items, and giving them a minimum height.
Add this to your CSS:
body {
display: flex;
flex-direction: column;
}
section {
min-height: 100%; /* alternatively, try `min-height: 100vh` */
flex-shrink: 0;
}
Revised Codepen