Make elements align vertically in flexbox

The problem is that if I put an h1 in the document, it takes up the page until the footer. Without flexbox this will not happen. It's like if the title occupies one column and the paragraph another one. The h1 must align above the paragraph.

https://jsfiddle.net/45j2yrzp/

html {
  display: flex;
  flex-direction: column;
}
/* IE fix */

body {
  display: flex;
  /* crée un contexte flex pour ses enfants */
  flex-direction: column;
  /* affichage vertical */
  min-height: 100vh;
  /* toute la hauteur du viewport (compatible IE9+) */
  font-family: cursive, sans-serif, serif;
}
.wrapper {
  display: block;
  /* IE fix */
  flex: 1 1 auto;
  /* occupe la hauteur restante */
  display: flex;
  /* crée un contexte flex pour ses enfants */
  flex-direction: row;
  /* affichage horizontal */
}
.content {
  display: flex;
  /* IE fix */
  flex: 1;
  /* occupe la largeur restante */
}
aside {
  position: fixed;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  top: 50%;
  background-color: #fff;
  border: 2px solid #cecece;
}
.left {
  left: 10%;
}
.right {
  right: 10%;
}
.arrow_left {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 25px solid #cecece;
  top: 20%;
  left: 25%;
}
.arrow_right {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 25px solid #cecece;
  top: 20%;
  left: 40%;
}
aside:hover {
  border-color: #ff5722;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.80);
}
.left:hover .arrow_left {
  border-right-color: #ff5722;
}
.right:hover .arrow_right {
  border-left-color: #ff5722;
}
/* Decoration */

body {
  background: #eeeeee;
  font-size: 1.1em;
}
footer {
  height: 40px;
  width: 100%;
  text-align: center;
  background-color: #303030;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
  color: white;
}
section {
  margin: 45px 20% 0px 20%;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
  overflow: hidden;
}
ul.menu {
  position: fixed;
  display: flex;
  top: 0;
  font-size: 100%;
  width: 100%;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
  list-style-type: none;
  background-color: #303030;
  color: white;
}
li a {
  float: left;
  padding: 13px 16px;
  text-align: center;
}
li a:hover {
  background-color: #ff5722;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.80);
}
#home {
  position: absolute;
  top: 0;
  right: 0;
}
li.active {
  background-color: #ff5722;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
}
li a {
  display: block;
  color: white;
}
address {
  margin-top: 3px;
}
/*End of the structure of the page*/

a {
  color: #ff5722;
  text-decoration: none;
}
span {
  color: #ff5722;
}
p {
  word-break: break-all;
  margin: 15px 30px;
}
img {
  height: 75%;
  width: 100%;
}

<header>
  <ul class="menu">
    <li><a href="">Option 1</a>
    </li>
    <li><a href="">Option 2</a>
    </li>
    <li><a href="">Option 3</a>
    </li>
    <li><a href="">Option 4</a>
    </li>
    <li><a href="">Option 5</a>
    </li>
    <li class="active"><a href="">Option 1</a>
    </li>
    <li><a href="">Option 1</a>
    </li>
    <li id="home"><a href="index.html">Home</a>
    </li>
  </ul>
</header>

<div class="wrapper">
  <section class="content">
    <h1>HELLO THIS IS THE TITLE</h1>
    <br>
    <br>
    <br>
    <br>
    <p>hello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
      the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
      paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
      the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
      paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
      the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
      paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
      the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
      paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraph</p>
  </section>
  <aside class="left">
    <div class="arrow_left"></div>
  </aside>
  <aside class="right">
    <div class="arrow_right"></div>
  </aside>
</div>
<!-- /wrapper -->

<footer>
  <address>Name Surname<br><a href="mailto:email@gmail.com">email@gmail.com</a></address>
</footer>