Footer fixo e obedecendo fluxo de crescimento

O rodapé se mantém preso ao final da página, e quando o conteúdo ultrapassa a viewport, ele acompanha ao invés de se sobrepor

HTML

<div class="main">
	    <div class="content">
	        <p>Aenean facilisis enim tortor, non vestibulum ipsum iaculis a. Curabitur velit orci, condimentum non suscipit sit amet, fringilla vitae tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam eget mi ante. Vivamus sit amet enim nibh. Etiam interdum, lectus ut tincidunt finibus, purus risus maximus dui, a imperdiet dui ante at libero. Vivamus quis lacus eu diam lobortis interdum. Nullam non interdum quam. Mauris consequat molestie dolor at faucibus. Donec suscipit orci quis nunc mollis tincidunt. Integer vel varius lorem. Suspendisse mattis velit sit amet ipsum blandit, eu consequat nisi finibus. Nulla sit amet dui et arcu cursus luctus in a libero. Nam quis ornare purus. In in ipsum ac felis rutrum lacinia nec at nulla. Proin elementum, libero vel vehicula volutpat, nunc massa rhoncus urna, ac venenatis ligula est quis erat.</p>
	    </div>

	    <div id="footer">
	    	<span>&copy; CSS ROCKS</span> 
	    </div>
	</div>

CSS

* { margin:0; padding:0; font-family: verdana; font-size: 1em;}

.main {
  background-color:#5c97bd;
  height: 100vh;
  color:#777;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content{
  background-color:#eee;
  padding: 10px;
}
#footer{
  background-color:#ccc;
  padding: 10px;
}