Flex布局无法出现滚动条

前言

今天博主使用flex写个聊天框遇到个奇怪的问题，本来博主是打算聊天框使用flex:1来铺满屏幕，然后超出部分显示滚动条的，少数的时候很满意，可是当信息多了就会超出部分，按照博主的思路来说一半flex:1有剩余的会铺满，有多的会出现在设置overlow之后会出现滚动条。然而却并没有出现，来看看博主的代码。

代码

父级样式

display: flex;
flex-flow: column;

子级样式

flex: 1;

这样来说超出部分应该是有滚动条的，然而并灭有。

研究

首先博主在谷歌上找到一个博客flex布局 滚动条失效的解决方案，
按照他的来解决在子级上设置了height:0之后在电脑上看的确是没问题了，然而在安卓手机上就看不到内容，可能flex是兼容问题，在博主研究很久之后才发现只需要跟父级节点设置height:100vh就可以了，子节点无需设置height:0。

延申

那么问题来了，什么是vh?
相对于视口的高度。视口被均分为100单位的vh，第一次看可能很难理解。咱们可以看成把一块蛋糕平均分成100快，而我height:100vh就表示我把父级这个100块蛋糕全部吃了，其实就是100%的意思。