解决uni-app中flex布局子元素宽度溢出

 在如下页面中,每一行使用flex布局,每行的头像宽度指定,右侧容器使用flex:1自适应,当name过长时,右侧容器宽度溢出。

解决uni-app中flex布局子元素宽度溢出_第1张图片

页面布局如下


	
	
		
			
                
				
            
			
								
						

解决uni-app中flex布局子元素宽度溢出_第2张图片

样式: 

.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多行文本溢出设置了white-space: nowrap导致溢出文本无法换行,而flex:1可以使子元素自适应父元素剩余宽度,但不能让自己的子元素的宽度自适应。

解决方法:给设置flex:1的wrapper-right添加overflow:hidden,让其子元素宽度自适应。

解决uni-app中flex布局子元素宽度溢出_第3张图片

参考:(1条消息) flex布局中 子元素宽度超出父元素导致样式问题_Dj19983160703的博客-CSDN博客_flex布局宽度超出

你可能感兴趣的:(小程序,flex)