有关vue项目页面的结构问题使用flex，控制菜单和内容不一起滚动

今天遇到一个特别头大大问题。就是代码改着改着，账号过期后退出了登录页看不见了。

我修改了项目左右的滚动情况（菜单和内容个滚个的）如图所示

就是去控制大的app大盒子不滚动再分别去控制左右的小盒子们去实现自己的滚动 。

所以我去操作了，入口模板文件app.vue 我把样式里面的flex给删除了，写了一个overflow：hidden进去，到这里我只是想让外层的大盒子默认撑开，然后内部子盒子多了就隐藏不显示滚动就好，结果我忘了flex去了，整个页面的宽度是没有了。（下面截图是正确写法，加上heigh：100vh 很重要）这样才能保证最后滚动时候一整个页面不是全部滚动，我思考了一下可能是应为单纯设置为flex的话高度不是真正意义上的满屏高度。

 

就是在编写进入页面后代码时候为什么没有发现，页面会因为最大的父盒子没有宽度而不显示内容呢。是因为进入后的菜单和右侧的内容部分通常包含部分都有一定自己的宽度，会把父盒子内容上下撑开，但是观察登陆页面最大盒子在没有设置宽高的情况下，登录页面没有宽高自然不会显示登录页面的内容了。

常规写法就是在app.vue文件里面使用display：flex，在login.vue里里面使用flex：1，快速的撑开宽高（如果app.vue里面不使用display，那就一定定义width:100%，height：100vh,在login.vue里面最大的盒子也定义宽高）那样内容才可以正常显示。

主要说一下问题发现的一个思路就是，思考页面的显示的主要跟路由用有关，是不是当路由表添加有错误，进行一次打印。没问题的话，就到了，vue其实已经找到页面，但是没显示出内容这一环节，找到了登录页是因为宽高而不显示内容。

最后分享菜单和内容各自滚动各自的代码。

菜单只让红的部分的地方滚动，找到右侧菜单的组件部分，编写css样式，可滚动但是隐藏滚动条

 右侧内容部分就是对右侧内容的css里面添加