vuetify sidebar 사용시 횡스크롤 문제

# vuetify 로
# 위쪽은 v-toolbar 를 위치시키고
# 왼쪽에 v-navigation-drawer(sidebar)를 위치시키고
# 오른쪽에 v-data-table 을 위치하도록 구성했다.
# v-data-table 의 컬럼 개수가 많아
# 브라우저의 폭을 줄일때 맨 오른쪽 부분이 보이지 않는 문제가 발생했다.
# 원래 v-data-table 자체에서 횡스크롤이 가능하고
# 브라우저 폭이 일정 크기 아래로 줄어 들면
# breakpoint 로직이 작동해 아래쪽으로 컬럼이 적절하게 보여진다.
# 하지만 v-data-table 에서도 sidebar 폭만큼 오른쪽 더 스크롤 되지 않는다.
# 원인은 div 의 overflow css 속성이 안돼 발생한것으로
# scroll 또는 auto 로 명시해야 화면 횡스크롤이 된다.(이걸 몰라 계속 삽질ㅠ)
vi app.vue
<style>
/* toolbar, sidebar 는 고정하고 오른쪽 영역에서 화면 횡스크롤 하기 위한 css */
.top-view {
  position: fixed; /* 스크롤 해도 위치 고정 */
  width: 100%; /* 전체 너비 채우기 */
  z-index: 99; /* 같은 위치에 여러 엘리먼트가 위치할때 이 값이 클수록 앞쪽(위로 덮는)으로 온다. vuetify default z-index : 5 */
}
.body-view {
  display: flex; /* 모든 요소를 한줄에 표시 */
  margin-top: 50px; /* top-view 높이 감안해서 50px 만큼 아래에 위치 */
}
.left-view {
  display: flex; /* 모든 요소를 한줄에 표시 */
  position: fixed; /* 스크롤 해도 위치 고정 */
  height: 100%; /* sidebar 높이를 전체 채우기 */
}
.right-view {
  width: 100%; /* 오른쪽 영역의 폭을 전체 채우기 */
  overflow: auto; /* 또는 scroll 값, 횡스크롤 가능하도록 */
  margin-left: 100px; /* sidebar 폭 감안해서 100px 만큼 오른쪽에 위치 */
}
</style>
<template>
  <v-app>
    <div class="top-view>
      <ysoftmanToolbar />
    </div>
    <div class="body-view">
      <div class="left-view">
        <ysoftmanNavigation />
      </div>
      <div class="right-view">
        <ysoftmanDatatable />
      </div>
    </div>
  </v-app>
</template>

<script>
import ysoftmanToolbar from '@/components/ysoftmanToolbar';
import ysoftmanNavigation from '@/components/ysoftmanNavigation';
import ysoftmanDataTable from '@/components/ysoftmanDataTable';
export default {
  name: 'App',
  components: {
    ysoftmanToolbar,
    ysoftmanNavigation,
    ysoftmanDataTable,
  },
  data() {
    return {};
  },
};
</script>