左边自适应，右边定宽，两栏布局实现

1. html 布局

<div id="app">
        <div class="left"> </div>
         <div class="right"></div>
     </div>

2. 基础css 样式

body {
    margin: 0;
    padding: 0;
}

#app {
    width: 100vw;
    height: 100px;
}

.right,
.left {
    height: 100%;
}

.right {
    background-color: skyblue;
}
.left {
    background-color: green;
}

3. css 实现

3.1 方式一 flex

#app {
    display: flex;
}
.right {
    width: 50px;
    flex-shrink: 0;
}
.left {
    flex-grow: 1;
}

3.2 方式二 grid

#app {
    display: grid;
    grid-template-columns: auto 50px;
}

3.3 方式三 float

.right,
.left {
    float: left;
}

.right {
    width: 50px;
}
.left {
    width: calc(100% - 50px);
}

3.4 方式四 postion

#app {
    position: relative;
}
.left {
    width: calc(100% - 50px);
}
.right {
    position: absolute;
    width: 50px;
    top: 0;
    bottom: 0;
    right: 0;
}