HarmonyOS 鸿蒙Next List中ListItem的高度自适应问题

场景是这样的，一个聊天页面 list包裹对话内容，当对话内容高度超过一屏时候，list会无法滚动到底部，新增item也会跟最底部的内容重叠：

List({ space: 10, initialIndex: 0, scroller: this.vm.listScroller }) {
  ForEach(this.vm.chatData, (chat: ChatTurboBean) => {
    ListItem() {
      if (chat.role == ‘send’) {
        Flex({ direction: FlexDirection.RowReverse, wrap: FlexWrap.Wrap }) {
          Text(chat.content)
            .fontColor($r(‘app.color.txt_black’))
            .fontSize(15)
            .align(Alignment.End)
            .padding({
              left: 15,
              top: 10,
              right: 15,
              bottom: 10
            })
            .backgroundColor($r(‘app.color.bg_gray’))
            .borderRadius(30)
        }
        .margin({ top: 20, right: 30 })

      } else if (chat.role == ‘message’) {
        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
          Image($r(‘app.media.app_icon’))
            .width(30)
            .height(30)
          Text(chat.content)
            .fontColor($r(‘app.color.txt_black’))
            .align(Alignment.Start)
            .width(‘80%’)
            .margin({ left: 10, top: 5 })
            .fontSize(15)
        }

      }
    }.margin({
      top: 0,
      left: 15,
      right: 15,
      bottom: 0
    })
    .height(‘auto’)
    .width(‘100%’)
  })
}
.listDirection(Axis.Vertical) // 排列方向
.width(“100%”)
.height(‘90%’)
.contentEndOffset(20)
.scrollBar(BarState.Off)