关于网页离奇出现滚动条这件事

Question

问题遇到的现象和发生背景

代码仓库：https://github.com/Qxiny/CodeChat
使用Electron+Vue开发的一个网页桌面软件。是一个聊天软件。在左边的会话列表添加了一个滚动条后便就加了一堆会话测试一下，结果发现右边的body离奇的出现了滚动条。并且发现如果右边滚动条不滚动的情况下左边的滚动条滑到底也显示不全。经过测量。显示不全的部分刚好与标题栏的高度相等。并且尝试把标题栏拉出去宰了。发现可以正常显示，左边滚动栏可以显示全面，右边也不会出现滚动条子。

（上图可以看出左边的滚动条（滚动条可能有点难看出来）已经拉到最下面了但是还是显示不全）

问题相关代码，请勿粘贴截图

相关代码
完整代码仓库，及其建议克隆到本地以方便解决此问题：https://github.com/Qxiny/CodeChat
1.NavBar.vue （标题栏）

<template>
  <div id="nav-bar">
    <div id="nav-btnbar">
      <button title="最小化" id="nav-min" @click="min"></button>
      <button title="最大化" id="nav-max" @click="max"></button>
      <button title="退出" id="nav-qui" @click="quit"></button>
    </div>
  </div>
</template>
<script lang="ts">
import { getCurrentInstance } from 'vue';

export default {
  setup () {
    const instance = getCurrentInstance();

    function sendIPCRequest (message:string) {
      if (instance != null) {
        instance.appContext.config.globalProperties.$ipcRenderer.send(message);
      } else {
        console.error('instance is null');
      }
    }

    function quit () {
      sendIPCRequest('nav-quit');
    }
    function max () {
      sendIPCRequest('nav-max');
    }
    function min () {
      sendIPCRequest('nav-min');
    }
    return { quit, min, max };
  }
};
</script>
<style lang="scss" scoped>
@import '../main.scss';

#nav-bar  {
  width: 100%;
  height: $nav-bar-height;
  background-color: #2c2c2c;
  -webkit-app-region: drag;
}

#nav-btnbar {
  display: flex;
  align-items: center;
  height: $nav-bar-height;
  float: right;
}
.nav-btn {
  height: 20px;
  width: 20px;
  margin-right: 10px;

  border: none;
  border-radius: 15px;
  outline: 0;
  -webkit-app-region: no-drag;

  &:hover{
    filter:brightness(1.05);
  }

  &:active{
    filter:brightness(0.8);
  }
}

#nav-qui{
  @extend .nav-btn;
  background-color: #e23737;
}

#nav-max{
  @extend .nav-btn;
  background-color: #22d82b;
}

#nav-min{
  @extend .nav-btn;
  background-color: #d8bf2e;
}

</style>

2.MsgList.vue (会话列表)

<template>
  <div id="msg-list-root">
    <my-info/>
    <div id="msg-list">
      <msg-item name="七夕泥"></msg-item>
      <msg-item name="成都某人"></msg-item>
      <msg-item name="小红"></msg-item>
      <msg-item name="老子名字就是长的很你怎么办呢?记得修改名字长度限制"></msg-item>
      <msg-item name="我就是来凑个个数的"></msg-item>
      <msg-item name="我就是来凑个个数的"></msg-item>
      <msg-item name="我就是来凑个个数的"></msg-item>
      <msg-item name="我就是来凑个个数的"></msg-item>
      <msg-item name="我就是来凑个个数的"></msg-item>
      <msg-item name="我就是来凑个个数的"></msg-item>
      <msg-item name="我就是来凑个个数的"></msg-item>
      <msg-item name="我就是来凑个个数的"></msg-item>
    </div>
  </div>
</template>
<script lang="ts">
import MsgItem from './MsgItem.vue';
import MyInfo from './MyInfo.vue';
export default {
  components: { MsgItem, MyInfo },
  setup () {
    return {};
  }
};
</script>
<style lang="scss" scoped>
@import '../../../main.scss';
$list-width:240px;

#msg-list {
  background-color: #e7e7e7;
  width: 100%;
  overflow:auto;
  display: flex;
  flex-direction: column;

  &::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
  }
  &::-webkit-scrollbar-thumb {
    height: 1px;    /* 滚动条滑块长度 */
    border-radius: 10px;
    background-color: #e9e9e9;
    &:hover {
      background-color: #c0c0c0;
    }
  }
  &::-webkit-scrollbar-track {
    background-color: #F5F5F5;;
  }
  &::-webkit-scrollbar-button {
  }
}
#msg-list-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: $list-width;
  // border-right: 1px solid #e7e7e7;
}
</style>

3.MsgItem.vue (会话列表中的会话组件)

<template>
  <div class="item">
    <img id="icon" src="../../../assets/logo.png" alt="">
    <p id="title">{{name}}</p>
  </div>
</template>
<script lang="ts">

export default {
  props: {
    name: {
      require: true,
      type: String
    }
  },
  setup () {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  height: 70px;
  flex-shrink: 0;
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e7e7e7;
}

#icon {
  height: 50px;
  padding-left: 10px;
}
#title {
  margin-left: 4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
</style>

我想要达到的结果

左边滚动条可以正常显示完整内容，不要右边的滚动条