我试图创建一个布局，其中我有一个标题和一个有三列的主区域。只有中心列应该是可滚动的。在找到一个相似的问题后，我把答案中提供的小提琴中的一个延长了。不幸的是，这只适用于沙箱。当我将它转移到我的vue组件时，整个页面都变得可滚动。我试图改变app，body和html类的css，但我只能得到没有滚动所有。

<template>
  <section class="main">
  <header>
    header: sized to content
      <br/>(but is it really?)
  </header>
  <div class="columns">
  <div class="column left">
  left
  </div>
  <div class="column center">
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>
  
  <div class="column right">
  right
  </div>
    </div>

  <footer>
    footer: fixed height in px
  </footer>
</section>
</template>

<style>
body {
  margin: 0px;
}
.main {
  display: flex;
  flex-flow: column;
  height: 100vh;
}
header {
  background: tomato;
;
}
.columns {
  flex: 1;
  display: flex;
  flex-flow: row;
  background: gold;
  overflow: auto;
}
.column {
  float: left;
  width: 25%;
}
.center {
  width: 50%;
  overflow-y: auto;
  background: white;
}
footer {
  background: lightgreen;
  min-height: 60px;
}
</style>