In flex layout, the width and height of the container are set to 100% respectively, and the width and height of the child element image are set to 200rpx; the width and height of the parent element follow the child element, and there is no 100% effect.

Question

wxml:

<view class='tz'>

 <image class='tz-image' src='../../image/tz.png'></image>

 <text class='tz-text'>欢迎来到***平台</text>

wxss:

.tz{

 width: 100%;

 height: 100%;

 display: flex;

 background: rebeccapurple;

 margin: 5rpx;

}

.tz-image{

 width: 200rpx;

 height: 200rpx;

}

.tz-text{

 background: red;

 }

</view>