Css 带有vue js的flexbox不工作

有人能告诉我这个简单的代码有什么问题吗？刚开始探索flexbox。它在普通html上工作得很好，但是一旦我对它进行了vuejs编辑，页脚就会停留在屏幕的顶部，就好像没有flex css一样

多谢各位

<template>
  <div id="app">
    <div class="wrapper">
      <p>THIS IS MY CONTENT</p>
    </div>
    <footer>
      This is the footer
    </footer>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px; 
/* added as per LGSon's suggestion */
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;

}
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}
footer {
  background: #ccc;
  padding: 20px;
}
</style>

这是我的内容

这是页脚
导出默认值{
名称：“应用程序”，
数据（）{
返回{
msg:'欢迎使用您的Vue.js应用程序'
}
}
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
/*根据LGSon的建议添加*/
身高：100%；
柔性生长：1；
显示器：flex；
弯曲方向：立柱；
}
html，正文{
身高：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
.包装纸{
弹性：10自动；
}
页脚{
背景：#ccc；
填充：20px；
}

要使其工作，使用标准HTML，应该是这样的，

HTML

/

主体

/

应用程序

具有

高度：100%

，您可以设置

显示：flex；弯曲方向：立柱至
#应用程序

这样，
wrapper
上的
flex:10 auto
将正常工作，并占用剩余的可用空间


html，body，#app{
身高：100%；
保证金：0；
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
显示器：flex；
弯曲方向：立柱；
}
.包装纸{
弹性：10自动；
}
页脚{
背景：#ccc；
填充：20px；
}

这是我的内容

这是页脚
为了实现它的价值，我制作了我的vue.js 2模板，如下所示：

<template>
  <div id="app">
        <div v-for="collection in collections">       
         <a v-bind:href="collection.pageurl">  
           <h1>{{ collection.title }}</h1>
           <h2>{{ collection.author }}</h2>               
        </a>   
        </div>
   <router-view/>
  </div>
</template>

#app {
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height: auto;
}

#app div {
  box-sizing: border-box;
  width: 300px;
  height: 185px;
  border: solid gray 1px;
  box-shadow: 1px 1px silver;
  margin: 1em;
  text-align: left;
  border-radius: 4px;
}

如果你也给
#app
一个高度，
高度：100%
，它应该很好用，谢谢你的快速回复。我加了那个，但还是不走运（如果你给
#app
flex-grow:1
？还是一样的。还要注意，
主体
上的
显示：flex
将只适用于它的子项，我假设它是
#app
，如果是这样，
#app
需要
flex-grow:1；显示：flex；flex方向：column
，这更好。我正在使用它。）现在，谢谢。