Container height not expanding to fit content resulting in overflow

Question

I tried to work with flexboxes but am having trouble with it.

This is how it should look:

As soon as the display is too small, the content either overflows the nested flexbox or (while I tried to fix it myself) the nested flexbox overflows the main flexbox.

Bug:

html,
body,
.viewport {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}

body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

header,
article,
section,
footer {
  padding: 2em;
}

header {
  background-color: red;
}

article {
  background-color: aqua;
  -webkit-flex: 1;
  flex: 1;
}

section {
  background-color: yellow;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.offer {
  background-color: cornflowerblue;
  border: 1px solid black;
}

footer {
  background-color: forestgreen;
}

<header>
  Header
</header>
<article>
  Article
</article>
<section>
  <div class="offer">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentes</div>
  <div class="offer">O2</div>
  <div class="offer">O3</div>
</section>
<footer>
  Footer
</footer>

Answer 1

If you want the container to expand with the content, then don't use a fixed height.

Use min-height instead.

jsFiddle demo

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* allows container to expand with growing content */
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}
body > * {
  padding: 2em;
}
header {
  background-color: red;
}
article {
  flex: 1;
  background-color: aqua;
}
section {
  display: flex;
  flex: 1;
  background-color: yellow;
}
.offer {
  background-color: cornflowerblue;
  border: 1px solid black;
}
footer {
  background-color: forestgreen;
}

<header>Header</header>
<article>Article</article>
<section>
  <div class="offer">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentes</div>
  <div class="offer">O2</div>
  <div class="offer">O3</div>
</section>
<footer>Footer</footer>