Fixed width on the left, adaptive flex layout on the right

.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;
}

Pay special attention to this min-width: 0, this is to solve the problem that the element will be stretched by the content inside, and it is compatible with Firefox browser.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324894662&siteId=291194637