css - 带有 vue js 的 flexbox 不工作

Question

有人能告诉我这个简单的代码有什么问题吗？刚开始探索 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>

Answer 1

为了让它工作，使用标准的 HTML，它应该是这样的，其中 html/body/#app 有 height: 100%，然后设置 display: flex; flex-direction: column; 到 #app。

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

html, body, #app {
  height: 100%;
  margin: 0;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}
footer {
  background: #ccc;
  padding: 20px;
}

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