关于一个微信上flex布局的问题！

Question

html:

<header> 
    HTML<h1>Site name</h1>
</header>
<div>
    <p>Bacon Ipsum dolor sit amet...
</div>
<footer>
    <p>© 2015 No rights reserved.</p>
    <p>Made with ♥ by an anonymous pastafarian.</p>
</footer>

---

css:

 body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
div{ flex: 1; }


本想使用这种布局使footer一直处于底部，但是在安卓手机微信上 main容器内容过多的话footer会浮现在main容器之上，想知道有什么解决办法。