左边固定宽，右边自适应的flex布局

.box{
overflow: hidden;
width: 100%;
display:flex;/设为伸缩容器/
display: -webkit-flex;
flex-flow:row;
}
.box .left{
-webkit-flex: 0 0 180px;
-ms-flex: 0 0 180px;
flex:0 0 180px;
}
.box .right{
-webkit-flex: 1;
-ms-flex: 1;
flex:1;
min-width:0;
}

特别要注意这个min-width:0，这个是为了解决元素会被里面的内容撑开的问题，而且兼容火狐浏览器。

转载于:https://www.cnblogs.com/chengaiying/p/8954853.html