Unable to scroll down and view text because of css3 hight vh property

In the responsive one page site- The 'About Us' tab has more text than the other tabs- and the overflowed text is not seen.

The site uses css3, it uses the vh property, for making the site responsive- and it works, but as a result I can't scroll down to view large text tab.

I have added an example for you to try: Code example (there's also a share link which you can download the content) Notice only the 'About us' tab has "too much" text, the other tabs works fine. I would like the be able to see the whole text at the 'About Us' tab.

html (navbar):

<nav class="nav nav--active">
    <ul class="nav__list">
        <li class="nav__item">
            <a href="" class="nav__link"> <div class="nav__thumb color1" data-letter="a"></div>
            <p class="nav__label">
                About
            </p> </a>
        </li>
        <li class="nav__item">
            <a href="" class="nav__link"> <div class="nav__thumb color2" data-letter="p"></div>
            <p class="nav__label">
                Products
            </p> </a>
        </li>
    </ul>
</nav>

content:

<div class="page">
    <section class="section section--active color1" data-letter="a">
        <article class="section__wrapper">
            <h1 class="section__title">About us</h1>
            <p>
                John Doe is ... long text
            </p>
        </article>
    </section>
    ...
</div>

css3:

.page{
    height: 100vh;
}

To sum it up: The css3 height vh property prevent the page from scrolling down to view the text. How to fix that?