父元素设置弹性布局
.container {
width: 500px;
height:200px;
display: flex;
}
.box1 {
width: 100px;
height: 100%;
background-color: green;
}
.box2 {
flex: 1;/*主要是这个起作用*/
background-color: red;
}
<div class="container">
<div class="box1">固定宽度</div>
<div class="box2">占满剩余宽度</div>
</div>
-
结果
结果.png - 需要设置其他宽度也可以通过设置flex的大小来调节
