Allow one of three columns to be scrollable in vuejs

Question

I am trying to create a layout where I have a header and a main area with three columns. Only the center column should be scrollable. After finding a similar question, I extended one of the fiddles provided in the answers.

Unfortunately this works only in the sandbox. When I transfer it to my vue component, the whole page becomes scrollable. I tried to change css of app, body and html classes but I could only get to no scrolling at all.

<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>

Answer 1

Looks like you are trying to achive scrolling when your mouse is outside of the centre div. If so then you can use this solution.

mounted () {
  window.addEventListener('wheel', (event) => {
    const scrollable = window.document.querySelector('.column.center')
    scrollable.scrollTop += event.deltaY
  })
},

Answer 2

I have finally found a solution. You have to add height: 100vh; to the column you want to scroll. So you have to change the center style to

.center {
  width: 50%;
  overflow-y: auto;
  background: white;
  height: 100vh;
}