两栏布局，左边定宽，右宽自适应，左边宽与右边保持一致

见代码

    <div id="wrap">
        <div id="left">
            <h1>134132412</h1>
            <h1>134132412</h1>
        </div>
        <div id="right">
            <h1>134132412</h1>
            <h1>134132412</h1>
            <h1>134132412</h1>
            <h1>134132412</h1>
            <h1>134132412</h1>
            <h1>134132412</h1>
        </div>
    </div>

css代码

<style type="text/css">
        #wrap {
            width: 100%;
            height: 100%;
            background-color: aqua;
            border: 1px solid black;
            border-bottom: 0px solid trans;
            display: flex;
        }
        
        #left {
            width: 300px;
            background-color: yellow;
            border: 1px solid black;
        }
        
        #right {
            flex:1;
            background-color: red;
            border: 1px solid black;
            overflow-x:hidden;

        }
        
        #left h1 {
            width: 100%;
            height: 100px;
        }
        
        #right h1 {
            width: 100%;
            height: 100px;
        }
    </style>

 这段代码主要用到 display:flex;弹性盒模型。达到效果是：左边固定，右边自适应，左边高度和父元素等高