CSS布局：上中下布局，上下不定高定两端，中间撑开且超出滚动。

需求描述

页面上中下布局，头部底部固定在一屏内的上和下，中间部分自适应撑满。上下部分的高度不确定。类似普通手机app应用的交互。中间撑开的部分需要超出滚动。

如图所示

这个看似常规且通用的布局方式。在头部底部高度不确定这个条件下，很容易忽略中间撑满且滚动的实现方案。

核心知识点
1、三行布局中间自适应高度，选择flex布局
2、中间撑开超出滚动，利用脱离文档流的方案，保证撑开高度的同时不挤掉footer

html 代码块如下

<div class="container">
        <header>header</header>
        <div class="content-wrap">
            <content>
                <p