在将一段 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> |
解决方法是给 flex 的 view 子元素加上 overflow:hidden。