小程序 换行和横向滚动问题?

Question

我在图片容器外面套了一层<scroll-view>, 确保容器内容超出后可以横向滚动
但是现在超出的内容被自动换行了, 不知道是什么原因导致的

overflow 默认状态不是 visible 吗? 即内容不会被修剪，会呈现在元素框之外
还是容器内容没有溢出就直接换行了?
如何解决这个问题, 实现中间内容不换行, 并且可以横向滚动

关键代码

order.wxml

<view class="wrapper">
   <view class="filter container d-flex justify-content-between mb-2">
      <view class="fs-3 fw-bold">{{ statusList[statusIndex] }}</view>
      <view bindtap="onStatusTap" class="picture-frame">
         <image class="icon" src="../../../images/icon-filter.png"></image>
      </view>
   </view>

   <view class="content container">
      <block wx:for="{{ orderList }}" wx:key="id">
         <view class="card px-0 mb-2 fs-1 text-black-50">
            <view class="d-flex align-items-center justify-content-between mx-2">
               <view class="">{{ item.dateTime }}</view>
               <view class="">{{ item.status }}</view>
            </view>
            <view class="my-2 py-2 bg-gray-250">
               <scroll-view scroll-x="true">
                  <block wx:for="{{ item.commoditys }}" wx:key="id">
                     <view class="picture-frame d-inline-block ml-2">
                        <image src="{{ item.imageSrc }}"></image>
                     </view>
                  </block>
               </scroll-view>
            </view>
            <view class="d-flex align-items-center justify-content-end mr-2">
               共 {{ item.quantityTotal }} 件商品 合计 ￥
               <text class="fs-2 fw-bold text-black">{{ item.priceTotal }}</text>
            </view>
         </view>
      </block>
   </view>
</view>

order.wxss

.filter .picture-frame {
   width: 70rpx;
   height: 70rpx;
}

.content .picture-frame {
   width: 120rpx;
   height: 120rpx;
}

全局 wxss 部分样式

.picture-frame {
   width: 150rpx;
   height: 150rpx;
   overflow: hidden;
}

.wrapper {
   padding-top: var(--mp-2);
   padding-bottom: var(--mp-2);
}

.container {
   margin-left: var(--mp-2);
   margin-right: var(--mp-2);
}

page {
    --mp-1: 10rpx;
    --mp-2: 20rpx;
    --mp-3: 30rpx;
    --font-size-1: 25rpx;
    --font-size-2: 30rpx;
    --font-size-3: 35rpx;
    --border-radius-default: 30rpx;
    --border-radius-semicircle: 100rpx;
    --border-radius-round: 50%;

    font-size: var(--font-size-2);
}

Answer 1

给 <scroll-view> 这个元素的 overflow-x 设置为 true 就行了，这个值默认是 false。

具体可以看这里 scroll-view | 微信开放文档 或者看这里 scroll-view | uni-app官网

Answer 2

需要图片的父级设置 white-space: nowrap;