说明

左侧自适应宽度，右侧固定宽度，网上有很多种实现方法，用传统方式，要么简单但不合理，要么合理但不简单

最终使用 flex弹性布局，flex布局默认 子元素是 水平显示

代码

css

<style>
    .container {
        display: flex; /*弹性布局*/
        background-color: aquamarine;
    }

    .main {
        background: blue;
        /*子元素指定高度，会自动撑开父元素和同级子元素*/
        height: 200px;
        flex: 1; /*自适应宽度*/
    }

    .sidebar {
        width: 300px; /*右侧固定宽度*/
        background: red;
    }

    .footer {
        background: green;
    }
</style>

<div class="container">
    <div class="main">主体内容显示区域</div>
    <div class="sidebar">右侧固定宽度</div>
</div>
<div class="footer">footer保证前面的不会影响此元素的显示</div>

原文出处：/show_1IX8Ye1PDPyt.html