SOURCE

<div class="body">
<div class="header">header</div>
<div class="main">
    <div class="left">
        <div class="icon-1"></div>
        <div class="icon-2"></div>
    </div>
    <div class="right"></div>
</div>
<div class="footer">footer</div>
</div>

html {
    /* 设置默认字体大小，1rem = 14px */
    font-size: 14px;
}

.body {
    /* 该容器为header、main、footer的上层容器 */
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 500px;
    background: gray;
}

.header,
.footer {
    width: 100%;
    height: 30px;
    background: red;
}

.main {
    /* 自动撑开 */
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
}

.main > div {
    border: 1px solid;
}

.main > .left {
    flex-grow: 1;
    position: relative
}

.main > .left > .icon-1 {
    width: 30px;
    height: 30px;
    background: pink;
    position: absolute;
    left: 100px;
    top: 100px
}

.main > .left > .icon-2 {
   width: 30px;
    height: 30px; 
    background: pink;
    position: absolute;
    top: 130px;
    left: 30px;
}

.main > .right {
    flex-grow: 2;
}