vue 文件样式被全局的默认父级#app样式影响，解决办法

问题是这样的：

新建的vue页面，最大的div是 container，不过从浏览器看最大的div是#app,这个是vue根组件自带的，红框里的样式是在App.vue文件里写的全局公共样式，这个样式让这个页面的背景图默认为白色，实际上这个页面的背景色是灰色，因为#app的默认高度只有100vh,所以就出现了截图中的，上灰下白的效果。只有把红框里的样式去掉就能把背景色改为灰色，不受影响了。

不过在vue文件里，是没法获取到#app 这是元素的，/deep/ 也不行，最后解决了，方案为：

先在该vue文件，最大的div里面套一个仅次于它的div,包裹所有代码。然后利用flex布局：

.container {
  width: 100%;
  background: #f2f2f2;
  height: 100%;
  display: flex;
  flex-direction: column;
  #main {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }

外部样式用了：

flex的垂直布局。

内部样式用了：

 flex 内部元素占用剩下的空间，并且y轴，也就是高，根据内容撑开，

这样就完美的解决了受App.vue文件里写的全局公共样式的问题了，全局样式没动。该vue文件用了scoped,也不好影响其他地方的样式，有用着呢，赶紧收录吧。。。。。。。