css设置弹性flex后，如果设置100vh高度不撑满的原因

问题

父元素设置height为100%，有两个子元素，第一个设置height:100vh，第二个设置flex:1，此时第一个高度无法撑满盒子

原因+解决方式

当父元素设置display为flex,第一个div设置高度64px,剩一个div设置高度为flex：1,这时候肯定两个子元素同高。但是如果此时设置第一个div的高度为100vh，父元素必须设置高度为height: 100% 或min-height: 100vh，才能实现第一个div高度完全占满，如果设置height：100vh，则无效，虽然父盒子撑满了，但是第一个盒子属于是无效高度，因为给第二个盒子的flex：1挤掉了。

代码示例解决如下

（1）父元素：只需将height：100vh换掉，下面标红方式二选一

（2）第一个子元素：此时设置height：100vh就会生效了，高度可占满盒子

（2）第二个子元素：设置flex：1，也可以占满盒子