?在如下頁面中，每一行使用flex布局，每行的頭像寬度指定，右側(cè)容器使用flex:1自適應(yīng)，當(dāng)name過長時，右側(cè)容器寬度溢出。

頁面布局如下

<view class="friend-list"><view class="avatar"></view><view class="wrapper-right"><view class="wrapper-right-inner"><view class="text"><view class="name"></view><view class="time"></view></view><view class="message"></view></view> </view> </view>

樣式：?

.friend-list{width: 100%;height:128rpx;display: flex; } .avatar{width: 84rpx;height: 84rpx; } .wrapper-right{flex:1;border-bottom: 1px solid #EDEBF2; } .wrapper-right-inner{display: flex;height: 128rpx;width: 100%;...... } .name{max-width:500rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;...... } .time{width: 186rpx;text-align: right;..... }

?具體原因是name多行文本溢出設(shè)置了white-space: nowrap導(dǎo)致溢出文本無法換行，而flex:1可以使子元素自適應(yīng)父元素剩余寬度，但不能讓自己的子元素的寬度自適應(yīng)。

解決方法：給設(shè)置flex:1的wrapper-right添加overflow:hidden，讓其子元素寬度自適應(yīng)。

參考：(1條消息) flex布局中 子元素寬度超出父元素導(dǎo)致樣式問題_Dj19983160703的博客-CSDN博客_flex布局寬度超出

總結(jié)

以上是生活随笔為你收集整理的解决uni-app中flex布局子元素宽度溢出的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。