Three implementation methods: left fixed and right adaptive (Flex, float + BFC, float margin left)

// structure 
<div class="demo">
    <div class="left"></div>
    <div class="right"></div>
</div>

1.Flex

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .demo {
        overflow: hidden;
        display: flex;
    }

    .left {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .right{
        height: 200px;
        background-color: aquamarine;
        flex: 1;
    }
</style>

2.float + BFC 

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .demo {
        overflow: hidden;

    }

    .left {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .right {
        height: 200px;
        background-color: aquamarine;
        /*  formation BFC The box  */
        overflow: auto;
    }
</style>

 3.float + margin-left

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .demo {
        /*  Remove the floating  */
        overflow: hidden;

    }

    .left {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .right {
        height: 200px;
        background-color: aquamarine;
        /*  Fixed box width  */
        margin-left: 200px;
    }
</style>