关于滚动条和居中布局中含左侧固定导航栏

居中布局：
需求：
点击左侧nav，右侧内容切换显示，且 1.整体居中 2.nav不跳

<template>
  <div class="outer">
    <div class="inner">
      <div class="left">
        <div v-for="item in 3" :key="item" @click="showNavTag = item">
          {{ 'nav ' + item }}
        </div>
      </div>
      <div class="right">
        <div class="content" v-show="showNavTag==1">1111111111111111</div>
        <div class="content" v-show="showNavTag==2">222222222222222</div>
        <div class="content" v-show="showNavTag==3">超出的内容 Lorem ipsum dolor sit amet, 
          consectetur adipisicing elit. Doloremque ipsam ipsum quae, tenetur totam voluptate. 
          Ab assumenda at consequatur, dignissimos, dolorem ducimus earum, iste iure labore magnam 
          nostrum optio placeat provident quaerat saepe totam ullam vitae voluptates. Accusantium 
          blanditiis delectus distinctio dolor dolore exercitationem officia provident saepe. Culpa 
          doloribus error explicabo pariatur possimus. A ab accusamus, aliquam assumenda blanditiis 
          commodi consectetur consequatur cum cupiditate debitis delectus dolorum eligendi eos eum eveniet
          ex explicabo fugiat ipsam labore laudantium libero magnam minus neque nisi officiis omnis optio 
          placeat provident, quasi quia quisquam quos rem repudiandae sequi soluta ullam, voluptas. Adipisci 
          culpa doloremque, fugit incidunt inventore obcaecati quo rem voluptas? Consequuntur, dolorem eligendi 
          id illo incidunt maxime, nostrum officia omnis, quos temporibus totam voluptatem? Earum fugiat in 
          ipsum iusto laudantium maiores minima nemo porro, sunt. A aliquam aperiam dignissimos dolorem doloremque
          earum impedit libero maiores maxime nesciunt nisi nobis non nostrum nulla omnis perferendis perspiciatis
          placeat provident quam quas quibusdam sapiente sit temporibus tenetur totam, ullam, vero voluptatum. 
          Adipisci autem blanditiis dicta ea earum est explicabo minima nostrum quibusdam, quis repudiandae tempora 
          vero voluptates. Assumenda, atque consectetur consequatur ea eos eveniet ipsum iste, mollitia nobis nostrum 
          odit perferendis quis quisquam similique unde. Adipisci assumenda debitis dolorem ea laborum laudantium magnam
          molestiae, praesentium ratione sit, tempore unde voluptate. Accusamus ad, culpa deserunt distinctio doloribus
          eligendi eos est ex exercitationem fuga iure laborum laudantium magnam nisi nostrum numquam quas quisquam quo
          repudiandae sed sequi ullam, vero voluptas voluptatem voluptatibus? Doloribus est magni odit. Quos, rerum, vitae.
          Ab dicta laboriosam officia optio provident quia velit vero. Aliquam aliquid consequuntur dolores harum id, 
          impedit officiis quod quos, reiciendis sint ullam veniam? Aliquam aspernatur aut cupiditate, deserunt dolorem 
          earum harum laboriosam maxime mollitia necessitatibus nostrum, perferendis perspiciatis placeat quae saepe vitae
          voluptatem, voluptates! Accusamus, consequatur culpa dolor dolores fuga fugiat illo incidunt ipsam ipsum libero
          minus perferendis qui quo quod reiciendis repellat sequi ut veritatis? Accusamus aliquam animi at blanditiis 
          consequuntur dolorum esse facere facilis ipsa laboriosam minus molestias nulla possimus quo reiciendis rem repudiandae
          sapiente sequi, tempore veniam? Architecto doloribus dolorum eaque excepturi incidunt nobis non nostrum porro, quae 
          quibusdam ratione sint vero voluptas. Accusantium blanditiis dicta doloremque enim, impedit in! Ab accusamus, ad aliquam
          architecto consectetur delectus deserunt dolor, exercitationem illum numquam quos sapiente suscipit tempora tempore 
          voluptatibus? A, accusantium ad aliquam amet asperiores corporis cupiditate dolorem eum explicabo facilis itaque minus
          nam neque numquam omnis porro quaerat, quod repellendus tempora totam unde ut vitae voluptas? A asperiores, at blanditiis
          deserunt earum eum, fugit ipsa iusto, molestiae optio quasi rem tenetur voluptas. Alias aliquam amet commodi consequuntur
          dolor enim eveniet excepturi, facere fuga fugit id impedit incidunt itaque officiis perspiciatis porro qui quibusdam quis
          rem reprehenderit rerum saepe sunt suscipit vitae voluptatum! At exercitationem explicabo quasi reiciendis voluptatum. 
          Aperiam aut consequatur minima modi tempora veritatis, voluptate. A animi cumque eos et eveniet explicabo laboriosam quam
          qui quos repellat! Alias amet corporis eligendi ex fuga iure modi officiis provident rerum. Alias aspernatur delectus, 
          et eveniet facilis hic maxime natus necessitatibus neque nesciunt nostrum, numquam perspiciatis provident quidem quisquam
          soluta voluptatibus! A aliquid atque consequatur cum dignissimos dolorem doloribus enim, ex excepturi exercitationem 
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Center",
  data() {
    return {
      showNavTag: 1
    }
  }
}
</script>

<style scoped lang="scss">
.outer {
  width: 100vw;
  height: 100vh;
}

.inner {
  width: 80vw;
  height: 100vh;
  display: flex;
  margin: 0 auto;
}

.left {
  width: 200px;
  background: aquamarine;
}

.right {
  flex: 1;
  background: aqua;
  >div  {
    width: 100%;
  }
}
</style>

实现：
1.outer固定宽度，外面有宽度，给margin:0 auto;
2.inner 的left固定宽度，inner的right给flex，填满宽度

所以flex的另一个用法就是给动态宽度

需求：
要nav在滚动的时候不变，右侧内容滚动

实现：
右侧的内容给高度，然后overflow:auto

工作里遇到的问题：
内部的overflow设置了auto，但是没给高度，
所以就把外面的盒子高度撑开了，然后最后冒泡到了body上，成了body上的滚动条
所以 给overflow auto的时候 要给宽度或者高度

另外 排查哪里的滚动条可以去对应的地方设置overflow：hidden