CSS實現三欄佈局，中間一欄自適應且隨文字大小變化寬度

百度面試碰到的題，要實現以下佈局效果

其中中間這紫色的一欄的大小隨字體的多少而變寬/變窄，且多出的文字自動省略爲[...],右邊的綠色欄要牢牢連着紫色這一欄。 主要對紫色這一欄的操做爲：

1. flex: 0 1 auto (自適應)

2. text-overflow:ellipsis;(自動省略文字)

   overflow:hidden;

   white-space: nowrap;

完整的代碼以下

// CSS 部分
.container {
  display: flex;
}
.pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: pink;
}
.name {
  flex:0 1 auto;
  height: 100px;
  background-color: purple;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space: nowrap;
}
.tag {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: seagreen;
}
複製代碼

// HTML 部分
<div class="container">
    <div class="pic"></div>
    <div class="name">
        zhasansndfdkfnald
    </div>
    <div class="tag">設計師</div>
</div>
複製代碼