Harmony Scroll不滚动的问题

在使用Scroll组件时设置了滚动的方向，内容也超出了页面的大小，但是就是不能滚动，原因是因为Scroll组件包裹下的容器组件设置了width或者height属性，下面以竖向滑动为例：

@Entry
@Component
struct Index {
  scroller:Scroller=new Scroller()
  @State message: string = 'Hello World'
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()
  private centerDialog: CustomDialogController = new CustomDialogController({
    builder: UpgradeDialog(),
    alignment: DialogAlignment.Center
  })

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Column() {
          Text(this.message)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .onClick(v => {
            })

          Progress({ value: 20, type: ProgressType.ScaleRing }).width(100)
          Progress({ value: 50, total: 100, type: ProgressType.ScaleRing })
            .color(Color.Grey)
            .value(50) //会覆盖前面的{value:50}
            .width(100)
            .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })

          LoadingProgress().color(Color.Blue).width(100).height(100)

          this.DialogButton("位于中间", this.centerDialog)

          DataPanel({ values: [15], max: 100, type: DataPanelType.Circle })
            .width(100)
            .height(100)

          Stack() {
            QRCode("哈哈").width(100).height(100)
            Image($r("app.media.app_icon")).width(50).height(50)
          }

          Search({ value: this.changeValue, placeholder: "输入搜索内容", controller: this.controller })
            .searchButton("搜索")
            .width("90%")
            .height(40)
            .backgroundColor(Color.White)
            .placeholderColor(Color.Grey)
            .placeholderFont({ size: 14 })
            .textFont({ size: 14 })
            .borderWidth(1)
            .borderColor(Color.Grey)
            .onSubmit((value: string) => {
              console.log("============---------" + value)
            })
            .onChange((value: string) => {
              console.log("=======" + value)
            })
            .margin(10)

          Select([{ value: 'aaa', icon: "/common/public_icon.svg" },
            { value: 'bbb', icon: "/common/public_icon.svg" },
            { value: 'ccc', icon: "/common/public_icon.svg" },
            { value: 'ddd', icon: "/common/public_icon.svg" }])
            .selected(2)
            .value('')
            .font({ size: 16, weight: 500 })
            .fontColor('#182431')
            .selectedOptionFont({ size: 16, weight: 400 })
            .optionFont({ size: 16, weight: 400 })
            .onSelect((index: number) => {
              console.info('Select:' + index)
            })


          RelativeContainer() {
            Row()
              .width(50)
              .height(50)
              .backgroundColor(Color.Blue)
              .alignRules({
                top: { anchor: "__container__", align: VerticalAlign.Top },
                left: { anchor: "__container__", align: HorizontalAlign.Start }
              }).id("row1")

            Row()
              .width(50)
              .height(50)
              .backgroundColor(Color.Green)
              .alignRules({
                top:{anchor:"row1",align:VerticalAlign.Bottom},
                left:{anchor:"row1",align:HorizontalAlign.End}
              }).id("row2")

            Row()
              .width(50)
              .height(50)
              .backgroundColor(Color.Pink)
              .alignRules({
                top:{anchor:"row2",align:VerticalAlign.Bottom},
                left:{anchor:"row2",align:HorizontalAlign.End}
              }).id("row3")

            Row()
              .width(50)
              .height(50)
              .backgroundColor(Color.Yellow)
              .alignRules({
                bottom:{anchor:"row3",align:VerticalAlign.Top},
                left:{anchor:"row3",align:HorizontalAlign.End}
              }).id("row4")

            Row()
              .width(50)
              .height(50)
              .backgroundColor(Color.Orange)
              .alignRules({
                bottom:{anchor:"row4",align:VerticalAlign.Top},
                left:{anchor:"row4",align:HorizontalAlign.End}
              }).id("row5")
            Row()
              .width(50)
              .height(50)
              .backgroundColor(Color.Orange)
              .alignRules({
                top:{anchor:"row3",align:VerticalAlign.Bottom},
                left:{anchor:"row3",align:HorizontalAlign.Start}
              }).id("row6")

          }.width(250)
          .height(250)
          .border({width:1,color:Color.Red})

        }
        .width('100%')
        //.height("100%")   //注意此处不能设置height属性
        .margin({bottom:20})
      }.width("100%")
       .height("100%") 
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.On)
    }

  }

  @Builder DialogButton(dialogName: string, dialog: CustomDialogController) {
    Button(dialogName)
      .margin(8)
      .fontSize(16)
      .fontColor(Color.Blue)
      .backgroundColor(Color.Grey)
      .padding({ left: 12, right: 12, top: 8, bottom: 8 })
      .onClick(() => {
        dialog.open()
      })
      .id('test_dialogButton')
  }
}