The two-column layout css

　　　Classic implementation left fixed width, the width of the right adaptive several methods

1. Using float and margin-left attribute (margin-left value may be equal to or slightly greater than the width of the .left)

 .left{
            width: 30px;
            float: left;
            background-color: red;
        }
        .right{
            margin-left: 50px;
            background-color: blue;
        }

　　　2. The use of position and margin properties

.parent{
            position: relative;
        }
        .left{
            position: absolute;
            left: 0;
            width: 50px;
            background-color: red;
        }
        .right{
            margin-left: 50px;
            background-color: blue;
        }

　　　3.flex layout

.parent {
            display: flex;
            align-items: flex-start;
        }

        .left {
            flex: 0 0 auto;
            background-color: red;
        }

        .right {
            flex: 1 1 auto;
            background-color: blue;
        }

Or may use the flex-grow property, directly above stated flow-grow .right attribute. 1, .right automatically fill the remaining space

 .parent{
            display: flex;
        }
        .left {
　　　　　　　width: 50px;
            background-color: red;
        }

        .right {
            flex-grow: 1;
            background-color: blue;
        }