微信小程序scroll-view占满剩余屏幕

思路：使用flex布局

一 wxml 代码

<view style="display:flex;flex-direction:column;height:100%">
  <text style="background:green">测试</text>

  <scroll-view scroll-y="true" style="background:red;flex:1;height:0;">
    <view wx:for="{{list}}" wx:key="{{index}}">
      <text>{{item}}\n\n\n</text>
    </view>
  </scroll-view>
</view>

二 wxss 代码

page{
  width:100%;
  height: 100%;
}

三 js 中的data添加一点数据

data: {
   list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
 },

效果如下:
保持上面布局(测试那个)不动，下面可以滚动