flex 布局自适应约束

.bgCover {
background: linear-gradient(180deg, #BBD6FF 0%, #D0E4F9 6%, #E4EFFA 12%, #F6F7F8 28%, #F6F7F8 100%);
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
overflow: auto;
}

.main {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
margin-bottom: 20rpx;
}

.vert-view {
flex: 1;
overflow: auto;
}

.vertical-view {
    // padding-top: 80rpx;
    // box-sizing: border-box;
    // position: absolute;
    // top: 80rpx;
    // height: calc(100vh - $headHeight - $marginBottomHeight - v-bind(statusBar) - 200rpx);
    // margin-top: 100rpx;
}

<view class="bgCover">
<Header :title="title" />
<view class="pl-20 pr-20 main">
<view class="selectStudent">
<view class="selectClass">
<uni-data-select v-model="schoolClassId" :localdata="classList" @change="changeClass"
placeholder="选择班级" />
</view>
<view class="searchBar">
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="studentName" placeholder="关键字搜索学生"
@iconClick="iconClick"></uni-easyinput>
</view>
</view>

        <view class="vert-view">
            <view class="vertical-view">
                <view v-if="detailStudentList.total > 0">
                    <view class="display-flex align-items-center justify-content-space-between card-view mt-30"
                        v-for="(item, index) in detailStudentList.list" :class="[isActive ==index ? 'active' : '']"
                        @click="goRoute(item, index)">
                        <view class="display-flex align-items-center justify-content-flex-start">
                            <view>
                                <u-avatar size="30" :src="item.avatar"></u-avatar>
                            </view>
                            <view class="ml-30">
                                <view>
                                    <text class="fsrpx-30 nickName">{{item.nickname}}</text>
                                </view>
                                <view>
                                    <text class="fsrpx-22 rateTs">最新点评时间:{{switchTimeToString(item.rateTs)}}</text>
                                </view>
                            </view>
                        </view>
                        <uni-icons type="right" size="15" color="#B3B3B3"></uni-icons>
                    </view>
                </view>
                <view v-else>
                    <defaultPage text='暂无数据' type='no-data' :customStyle="{height:'320rpx'}"></defaultPage>
                </view>
            </view>
        </view>
    </view>
</view>