小程序scroll-view设置flex-grow：1时滚动失效

有时候我们想让scroll-view占满屏幕剩余部分，于是就想到了flex-grow：1，但是发现在开发工具上有效，但是到了真机上就不能滚动了。

原因时scroll-view设置纵向滚动时必须要设置一个具体的高度。

解决方案:

给scroll-view加一个父元素，设置flex-grow：1，在页面加载时获取父元素的高度并赋值给scroll-view。

<view class="scrollWrap">
    <scroll-view scroll-y :scroll-with-animation="true" :style="{ height: scrollHeight+'px' }" :scroll-into-view="toView"></scroll-view>

</view>

onShow() {
    this.getHeight()
},

methods: {

     getHeight(){
        var query = uni.createSelectorQuery();
        var that = this;
        query.select('.scrollWrap').boundingClientRect(function (rect) {
            console.log(rect)
            that.scrollHeight = rect.height
        }).exec();
     }

}

<style>

.scrollWrap {
    flex-grow: 1;
    overflow: hidden;
}

</style>