CSS实现纵向类似飞翼布局，正中为固定下拉条容器

首先是效果图


头部的CSS代码：

        width: 100%;
        height: 38px;
        flex: 0 0 38px;
        margin-top: 20px;
        line-height: 38px;
        opacity: 1;
        background: #f1f4f9;
        border-radius: 8px 8px 0px 0px;
        top: 10px;

尾部的CSS代码：

        width: 100%;
        flex: 0 0 52px;
        height: 52px;
        line-height: 52px;
        opacity: 1;
        background: #ffffff;
        border-radius: 0px 0px 16px 16px;
        box-shadow: 0px -1px 0px 0px rgba(226, 226, 234, 0.5);

中间部分代码：

        flex: 1;
        overflow: overlay;

重点 在父容器中flex布局样式：

      display: flex;
      flex-direction: column;
      // 这个属性非常重要， 如果没有这样的属性，那么下面的父容器将特别高， 尽管实现了中间适应的效果，
      但是，无法实现中间容器上下滚动的效果
      min-height: 10px;

画面可能不是很清楚， 中间的min-height 指父容器的最小高度， 不是中间容器。

最初没有min-height属性布局拉长的情况

如果你说为什么要添加父容器min-height可以在不拉动的情况下实现特别长的布局，从而实现固定的满。div的话 我不确定， 如果我稍后了解，我会更新内容， 或者有一个高的人来指出！