flex 布局 左侧固定右侧自适应 超出内容隐藏，并保证布局效果

效果图：

注意点： 当右侧设置文本超出隐藏后，会影响整体页面布局，只需为右侧添加min-width数据即可。

代码： 以下是代码

<template>
  <div class="main-view">
    <div class="left-view">这是左侧</div>
    <div class="right-view">
      <div class="text-overflow-ellipsis">{{ testData }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testData: '这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，这是测试文字，'
    }
  }
}
</script>
<style lang="scss">
.main-view {
  width: 100%;
  height: 100vh;
  display: flex;
}
.left-view  {
  min-width: 100px;
  padding: 20px;
  width: 200px;
  height: 100%;
  background: skyblue;
}
.right-view {
  width: 100%;
  padding: 20px;
  flex-grow: 1;
  height: 100%;
  background: yellowgreen;
}
.text-overflow-ellipsis {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>