Mini Program's simultaneous use of column-reverse and scroll-view causes the element to disappear

< H1 > question < / H1 >

when Mini Program uses both column-reverse and scroll-view , the elements in scroll-view are pushed to the top and cannot be seen. I simply drew a picture to show that blue is the screen, green is scroll-view , and yellow is view

that I want to fix at the bottom.

the effect I want is yellow view fixed at the bottom, and green scroll-view occupies the screen except the yellow part

could you tell me how to solve this problem? Or is there any way to meet my needs?

< H1 > sample code < / H1 >

<!--WXML-->
<view class="wrapper">
    <view class="bottom-view"></view>
    <view class="scroll-wrapper">
        <scroll-view scroll-y="true">
            <view class="pushed">
                <view></view>
                <view></view>
            </view>
            <view class="main">
                <view>HelloWOLRD</view>
                ......
                <view>HelloWOLRD</view>
                <view>HelloWOLRD</view>
                <view>HelloWOLRD</view>
            </view>
        </scroll-view>
    </view>
</view>

<!--WXSS-->
.wrapper {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column-reverse;
}

.bottom-view {
    width: 100%; height: 100px;
}

.scroll-wrapper {
    width: 100%; height: 100%;
}

.pushed {
    width: 100%; height: 50px;
}

.main {
    width: 100%;
}