scroll-view自动适应高度，不定高度

效果图

定高不友好

在前端工作开发中，我们常常会遇到如图需求。

实现也很简单内容区域使用scroll-view标签包裹住，内容超出就可以滚动了。

但是！！！

scroll-view需要设置一个高度值，它才可以滚动，如：height: 300rpx。但是这并不友好

高度值 我们是不应该写死 而是让它灵活自适应 我们可以用到flex布局去实现

代码块

我这里是uni-app的语法

<template>
    <view class="menber-container">
        <view class="header"></view>
        <view class="scroll-container">
            <scroll-view class="scroll-view" scroll-y="true" style="height: cacl(100% - 10rpx)">
                   <view style="height: 60rpx; line-height: 60rpx;" v-for="item in 20">
                        <view>我是模拟内容：{{item}}</view>
                    </view>
                    <u-button text="联系客服" openType="contact" shape="circle"
                        customStyle="background-color: #FD773B; font-size: 28rpx; color: #fff; height: 76rpx; width: 80%;border: none">
                    </u-button>
             </scroll-view>
        </view>
    </view>
</template>

<style lang="less" scoped>
    .menber-container {
        display: flex;
        flex-direction: column;// flex垂直布局
        height: 100vh;// 必须写100vh，小程序上100%可能无法继承高度
        overflow: hidden;
    }
    .header {
        height: 120rpx;
        background-color: #E91083;
    }

    .scroll-container {
        flex: 1;// 达到高度自适应
        overflow: scroll;// 关键代码，溢出的部分显示滚动条 不溢出也显示
    }
</style>