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%