Css实现左侧固定，右侧自动填充的两种方式

页面结构html

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

第一种方式：float

<style>
.left{
    float: left;
    background: olive;
    width:150px;
    height: 300px;
}
.right{
    overflow: hidden;
    background: #df0;
    height: 300px;
}
</style>

第二种方式：flex

.container{display: flex;}
.left{
    flex:none;
    background: olive;
    width:150px;
    height: 300px;
}
.right{
    flex:1;
    background: #df0;
    height: 300px;
}

展示效果，两种都是一样的

当然还有别的很多实现方式，在此只记录两种常用的够用就行。