Flexbox won't vertically align content - html

Question

All of the flexbox tutorials that I've seen so far say that vertical align is done by using align-items and justify-content and setting both to center; however that doesn't seem to be working, as you can see below (I'm trying to align the lorem ipsum text). The browser I'm using is Chrome, if that matters.
Here's a codepen: http://codepen.io/anon/pen/QjBrEm
I've tried a lot of the suggestions here on Stack Overflow, for example:
body, html:
height: 100%
These don't seem to work.

Answer 1

Your SASS should be:
.initial
background-color: #212121
color: #ffffff
display: flex
align-items: center
justify-content: center
to align the content of that element as flexbox layout is not inherited by children.
Codepen Demo

Answer 2

When you create a flex container only the child elements become flex items. Descendants beyond the children do not become flex items and flex properties don't apply to them.
So if you're trying to center the <p> text, you'll notice the <p> is a child of <section>, which is a flex item but not a flex container.
You'll need to make <section> a (nested) flex container so that flex properties apply to the <p>.
Try this:
#mainpage-container section {
width: 100%;
height: 100vh;
text-align: center;
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
}
DEMO: http://codepen.io/anon/pen/xwJjvO

Answer 3

You have laid out the sections inside of the container using flexbox, and as shown on Codepen this gives the result that all three sections are shown below each other.
The text in the first section is inside section.initial, which is not laid out using flexbox, as that was only specified on the parent. Therefore, the text is just placed according to the default padding and the text-align you entered.
To get the text centered in the section, also start using flexbox layout in that section.

Answer 4

Since you are aligning the paragraph inside the section element, you need to use the flexbox properties on section(parent). Flexbox properties on #mainpage-container will not have effect on the grandchild p as it is not inherited by the parent i.e. section element.
#mainpage-container section.initial {
display: flex;
justify-content: center;
align-items: center;
}
#mainpage-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#mainpage-container section {
width: 100%;
height: 100vh;
text-align: center;
}
#mainpage-container .initial {
background-color: #212121;
color: #ffffff;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
#mainpage-container .initial #logo {
height: 15rem;
width: auto;
}
<div id="mainpage-container">
<section class="initial">
<!--<img src="/assets/k.png" id="logo">-->
<p>Lorem ipsum.</p>
</section>
<section>
</section>
<section>
</section>
</div>