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%的意思。