微信小程序中justify-content: flex-end 失效

不正确的效果是这样的：

页面wxml代码如下：

<scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{
   
   {order}}" wx:key=" ">

        ........省略部分代码......
        ........省略部分代码......
        ........省略部分代码......

        <view class="productBtn">
          <button class="more" hover-class="hover" bindtap="">删除订单</button>
          <button class="more" wx:if="{
   
   {item.isPay===0}}" hover-class="hover" bindtap="">取消订单</button>
          <button class="more" wx:if="{
   
   {item.isPay===0}}" hover-class="hover-pay" bindtap="">付款</button>
        </view>
      </view>

    </scroll-view>

wxss代码如下：

.productBtn {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 25rpx;
  margin-top: 30rpx;
  justify-content: flex-end;
  padding: 0;
  height: 70rpx;
}

问题：无论怎么设置 justify-content都不起作用，三个按钮都是均匀分布。

解决方法，修改wxml代码，给每个button外边套一层view：

<scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{
   
   {order}}" wx:key=" ">
        
        ..........省略部分代码..........
        ..........省略部分代码..........
        ..........省略部分代码..........

        <view class="productBtn">
          <view>
            <button class="more" hover-class="hover" bindtap="">删除订单</button>
          </view>
          <view>
            <button class="more" wx:if="{
   
   {item.isPay===0}}" hover-class="hover" bindtap="">取消订单</button>
          </view>
          <view>
            <button class="more" wx:if="{
   
   {item.isPay===0}}" hover-class="hover-pay" bindtap="">付款</button>
          </view>
        </view>
      </view>
</scroll-view>

修改后效果如下：