两个div水平占满，其中一个指定宽度px

两个div水平占满，其中一个指定宽度px，另一个填满剩余部分：

 

html格式样例： container为外层，fix为固定宽度，auto为剩余部分

<div class="container">
    <div class="fix"></div>
    <div class="auto"></div>
</div>

方式一.调用calc方法：

*{
    box-sizing: border-box;  
}
div {
    border: 1px solid;
    width: 500px;
    height: 100px;
}
.container > * {
    float: left;
}
.fix {
    width: 100px;
    background: red;
}
.auto {
    width: calc(100% - 100px);
    background: green;
}

方式二.flex布局

div {
    border: 1px solid;
    width: 500px;
    height: 100px;
}
.container {
    display: flex;
}
.fix {
    width: 100px;
    background: red;
}
.auto {
    flex: 1;
    background: green;
}