Flex 布局下子元素宽度大于父元素时不会自动缩放
发布于 5 年前 作者 wei30 2648 次浏览 来自 问答

在将一段 HTML 代码迁移到小程序版本的过程中发现如下问题:

这是 HTML 中的图片在普通浏览器中的情况:

这是解析为 WXML 后在小程序的情况:

对比发现,这两张图片所在的父元素为 Flex 布局,justify-content 为 space-between;。

在普通浏览器下,当 justify-content 为 space-between; 时,当子元素宽度超过父元素时,子元素会自动缩小。

而在小程序中,子元素不会缩小,还会溢出。溢出的方向取决于 justify-content 的值。

<view style="display: flex;justify-content: space-between;">
    <view style="width: 500px;max-width: 100%;">
        <image src="./1.jpg" style="width: 500rpx;max-width: 100%;" />
    </view>
    <view style="width: 500px;max-width: 100%;">
        <image src="./1.jpg" style="width: 500rpx;max-width: 100%;" />
    </view>
</view>
1 回复

解决方法是给 flex 的 view 子元素加上 overflow:hidden。

回到顶部