如果可以实现记得点赞分享，谢谢老铁～
一、背景说明
对于纵向排列布局，且上中下个个模块都是自动高度。当我们针对中间部分需要自适应高度且进行滚动时，那我们就可以用flex: 1 来处理。
二 、先看效果图
二 、flex布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局实现 内容区域高度自适应</title><style>* {padding: 0;margin: 0;}.directoryCon {height: 100vh;width: 100%;background-color: aqua;display: flex;flex-direction: column;justify-content: space-between;}.directoryCon .headerTitle {height: 100px;background-color: blue;display: flex;justify-content: center;align-items: center;}.directoryCon .main {flex: 1;background-color: rgb(0, 174, 255);overflow: hidden;display: flex;}.directoryCon .main .menu{display: flex;flex-direction: column;}.directoryCon .main .menu .logo{height: 100px;width: 100%;background-color: blueviolet;display: flex;align-items: center;justify-content: center;}.directoryCon .main .menu .list{flex: 1;overflow-y: scroll;background-color: rgb(255, 166, 0);}.directoryCon .main .menu ul>li{height: 200px;width: 250px;display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #000;}.directoryCon .footer {height: 100px;background-color: rgb(137, 206, 97);display: flex;justify-content: center;align-items: center;}</style>
</head>
<body><div class="directoryCon"><div class="headerTitle"><h1>头部</h1></div><div class="main"><div class="menu"><div class="logo"><h1>FLEX布局</h1></div><ul class="list"><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li></ul></div></div><div class="footer"><h1>底部</h1></div></div>
</body>
</html>二 、解析
在 Flexbox 布局中，我们可以通过设置容器的 display 属性为 flex 实现自适应高度。
当我们将容器的 display 属性设置为 flex 时，容器中的所有子元素都会成为 Flexbox 容器的项目。
我们可以通过设置 flex-direction 属性来确定 Flexbox 容器中子元素的排列方向。默认情况下，子元素的排列方向是 flex-direction: row，即按照行方向排列。
在实现自适应高度时，需要将容器的 display 属性设置为 flex 和 flex-direction 属性设置为 column，就可以轻松地解决传统布局中内容自适应高度的问题。
同时，我们还设置了容器的 height 属性为 height: 100vh ，为容器定义了一个固定的高度。并通过设置所有子元素的 flex 属性为 1，让它们平分容器的剩余空间。
