uniapp scroll-view撑满问题

<template>
	<view class="big-box flex-col align-center">
		<top-navigation  :isBack="true">
		</top-navigation>
		<view class="title-box ">
			<view class="title">
				打卡排行榜
			</view>
			<view class="num justify-center align-center">
				第{{88}}期
			</view>
		</view>
		<image class="jiangbei" src="/static/images/signgame/jiangbei.png" mode=""></image>
		<view class="scroll-box border ">
			<scroll-view scroll-y="true" >
				<view class="flex-col align-center">
					<view v-for="i in 100 " class="rank-item">
						
						
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {

	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		position: relative;
		height: 100vh;
		overflow: hidden;
		 background-image: linear-gradient(180deg , #EC8445, #F2B36B);
		.num{
			padding:20rpx;
			border-radius: 1000rpx;
			width: max-content;
			background: #FFF;
		}
		.title-box{
			position: absolute;
			width: 100%;
		}
		.jiangbei{
			position: fixed;
			top: 0;
			right: 50rpx;
			width: 403.47rpx;
			height: 339.58rpx;
		}
		.scroll-box{
			overflow: hidden;
			width: 667.36rpx;
			flex: 1;
			margin-top: calc(339.58rpx - 88rpx);
            scroll-view{
            height:100%    
            }
			.rank-item{
				width: 618rpx;
				height: 97rpx;
				background: #FFF1E5;
				margin-bottom: 13rpx;
			}
		}
	}
</style>

通过给页面一个flex布局 ,在scroll-view外层套一层view添加css flex:1进行撑满,需要注意最大盒子设置overflow:hidden, scroll-view的高度设置100%