html css - 左边是不能滚动的目录，右边是可以滚动的内容

如图：

<template>
  <el-dialog v-model="dialogVisible" title="预览文件" width="80%" :before-close="handleClose">
    <div class="main-box-container">
      <div class="left-box">
        <div v-for="item in fileNameList" :key="item">{{ item }}</div>
      </div>

      <div class="right-box">
        <div v-for="(value, index) in 50">案件客户端接口拉黑 - {{ index }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
let objInfo = ref({})
const dialogVisible = ref(false)

const handleClose = () => {
  dialogVisible.value = false
}

let fileNameList = ref([])
let filePathList = ref([])
const open = (info) => {
  dialogVisible.value = true
  objInfo.value = info
  console.log('objInf=', objInfo.value)

  fileNameList.value = info.fileNames?.split(',')
  filePathList.value = info.filePaths?.split(',')
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.main-box-container {
  display: flex;
  overflow: hidden;
  max-height: calc(90vh - 160px) !important;
}

.left-box {
  flex: 1;
  background-color: pink;
  overflow-y: scroll;
}

.right-box {
  flex: 5;
  background-color: aqua;
  overflow-y: scroll;
}
</style>