flex:1的宽度与预想效果的不一样？

为什么有时候flex：1的效果会与预想的不一样呢？

1.问题描述：

明明使用flex: 1是让填充剩余空间，可当其内容很大时却把其他容器给挤没了

2.代码展示：

代码如下：

<template>
	<view class='root-container'>
		<view class="search-item flex">
			<view class="avatar">
				<image src='../../static/images/a1.jpeg' mode=""></image>
			</view>
			<view class="info flex-1 flex flex-d flex-justify-content">
				<view class="nickname single">
					昵称很短
				</view>
				<view class="account single">
					这个消息很短
				</view>
			</view>
			<view class="btn">
				<view class="sendMsg">
					发消息
				</view>
			</view>
		</view>
		<view class="search-item flex">
			<view class="avatar">
				<image src='../../static/images/a1.jpeg' mode=""></image>
			</view>
			<view class="info flex-1 flex flex-d flex-justify-content">
				<view class="nickname single">
					昵称很短
				</view>
				<view class="account single">
					这个消息很长很长很长很长很长很长很长很长很长很长很长很长
				</view>
			</view>
			<view class="btn">
				<view class="sendMsg">
					发消息
				</view>
			</view>
		</view>
	</view>
</template>
<style lang='scss' scoped>
.flex{
	display: flex;
}
.flex-1{
	flex: 1;
}
.flex-d{
	flex-direction: column;
}
.flex-justify-content{
	justify-content: center;
}

// 单行文本溢出隐藏
.single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-item {
  margin-top: 20rpx;
  display: flex;
  align-items: center;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
    overflow: hidden;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .info {
    padding: 0 32rpx;
    box-sizing: border-box;

    .nickname {
      font-size: 36rpx;
      color: #272832;
      font-weight: 400;
    }
  }

  .btn {
    width: 120rpx !important;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    padding: 0;
    font-family: PingFangSC-Regular;
    font-size: 24rpx;
    font-weight: 400;
    border-radius: 24rpx;
    overflow: hidden;

    .sendMsg {
      color: #272832;
      background: #ffe431;
    }

    .add {
      background: rgba(74, 170, 255, 0.1);
      color: #4aaaff;
    }
  }
}
</style>

3.解决方案：

经过尝试翻阅，有如下两个两种方案:

3.1 方案1:

.flex-1{
	flex: 1;
	width: 0;
}

3.2 方案2:

.flex-1{
	flex: 1;
	overflow: hidden;
}