display: flex;’佈局下使用‘white-space: nowrap;’致使的問題

需求：

在item中實現佈局預期效果爲：左側一個正圓形的用戶頭像，右側的上方爲該用戶暱稱、下方爲個性簽名（單行顯示，超出實際能顯示的最大寬度則用‘...’代替）。如圖：

代碼：

wxml佈局:

<view class="member-item">
    <image class="avatar" src=""></image>
    <view class="info">
      <view class="name">姓名</view>
      <view class="signature">這我的很懶，什麼都沒寫。這我的很懶，什麼都沒寫。</view>
    </view>
  </view>

wxss樣式：

.member-item {
  margin-top: 1px;
  padding: 15rpx 30rpx;
  display: flex;
  flex-direction: row;
  background-color: white;
  width: auto;
}
 
.avatar {
  background-color: whitesmoke;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
}
.info {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  flex: 1;
}
.name {
  font-size: 30rpx;
  color: #333;
  line-height: 48rpx;
}
.signature {
  font-size: 28rpx;
  color: #888;
  line-height: 48rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

效果：

問題：

爲了自適應屏幕大小，這裏父佈局採用flex，展現個性簽名的view對應的class爲signature，其中我經過「overflow: hidden; text-overflow: ellipsis; white-space: nowrap;」來實現單行顯示，超出實際能顯示的最大寬度則用‘...’代替的效果。可是在實際效果如上圖所示，當內容超出實際可顯示寬度時，擠壓推出左側佈局以顯示signature中的內容，致使左側佈局的變形甚至被擠出。

解決辦法：

在signature的父佈局info中添加樣式min-width: 0;便可解決。