类似一个聊天页面，需要使用scroll-view，也没有用什么很奇葩的样式，只是高度是动态算出来的，外层还包了一层flex，不知是否是支持不够？请大佬帮忙解答下。

代码如下：

// wxml
 <scroll-view
      class="chat"
      scroll-y="true"
      enable-flex="true"
      refresher-enabled="{{hasMore}}"
      refresher-triggered="{{gettingMsgs}}"
      refresher-default-style="white"
      bindrefresherrefresh="getHistoryMessages"
      scroll-into-view="{{currentMsgId}}"
      style="height: {{scrollHeight}}px"
    >
      <view wx:for="{{msgs}}" wx:for-item="msg" wx:for-index="i" wx:key="ID" id="{{msg.ID}}" class="dialog-wrapper{{msg.isMe ? ' me' : ''}}">
        <view wx:if="{{msg.isNotification}}" class="notification">
          <text>{{msg.payload.data}}</text>
        </view>
        <view class="time">
          <text>{{msg.format_time}}</text>
        </view>
        <view class="text dialog">
          <text>{{msg.payload.text}}</text>
        </view>
        <image class="avatar" src="{{msg.isMe ? myInfo.avatar : hisInfo.avatar}}"/>
      </view>
    </scroll-view>

//wxss
.chat-wrapper {
    flex: 1 1 0%;
    width: 100%;
    .chat {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 24rpx;
      padding-bottom: 0;
      box-sizing: border-box;
      .avatar {
        width: 72rpx;
        height: 72rpx;
        border-radius: 100%;
        order: 1;
      }
      .notification {
        width: 445rpx;
        height: 88rpx;
        background: #0C062A;
        border-radius: 52rpx;
        display: flex;
        justify-content: center;
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        align-items: center;
        transform: translateX(-50%);
        position: relative;
        left: 50%;
      }
      .dialog-wrapper {
        margin: 22rpx 0;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        &.me {
          justify-content: flex-end;
        }
        .time {
          font-size: 26rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
          line-height: 37rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          margin-bottom: 44rpx;
        }
      }
      .dialog {
        padding: 30rpx 33rpx;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 45rpx;
        margin-left: 16rpx;
        max-width: 524rpx;
        background: #FFFFFF;
        border-radius: 0rpx 24rpx 24rpx 24rpx;
        color: rgba(0, 0, 0, 0.8);
        order: 2;
      }
      .me {
        .dialog {
          color: #FFFFFF;
          background: #6E52FE;
          border-radius: 24rpx 0rpx 24rpx 24rpx;
          margin-right: 16rpx;
        }
        .avatar {
          order: 3;
        }
      }
    }
  }