背景

table 大致布局如下：

  <div class="rate-column">
                <div class="item1"></div>
                <div  class="item2"></div>
                <div  class="item3">
                   <el-table:data="tableData" style="width: 100%">
                     <el-table-column min-width="40">
                      <template #default="{ $index }">
                       <BaseSvgIcon v-if="$index === 0" :symbol-id="'golden'" />
                      </template>
                    </el-table-column>
                   </el-table>
                </div>
            </div>

----scss-------
.rate-column{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    .item1,.item2{
        flex:1
    }
    .item3{
        flex:2
    }
}

问题

拖动窗口的时候，table 只能自适应变大，不能自适应变小，导致item1和item2 被挤压

尝试解决一

网上的解决方案，意思给item3（表格的父元素） 添加以下样式：

overflow-x: hidden;

即可解决。尝试结果如下图：

失败

尝试解决二

给 item3 同级的所有flex 元素（即item1,item2,item3） 加overflow-x: hidden;属性，结果如下图：

成功

最终添加的css 样式：

.rate-column{
       > div {
         overflow-x: hidden;
      }
}

pppps:问题二

发现个小问题，上图中table第一列里面的图片旁边会出来点点，一开始只是一个，缩放后发现是省略号，仔细排查后发现.el-table .el-table__cell 的样式是默认超长省略的：

省略号

所以应该是第一列的宽度不够了，加宽点就好啦。