问题描述

在使用flex布局编写页面的时候，布局如下

//html部分
<div class="administrative">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right">
      <Table :columns="column" :data="tableData"></Table>
    </div>
  </div>
//css部分
<style scoped lang="scss">
.administrative {
      
      
  display: flex;
  width: 100%;
  height: 100%;
  &>div{
      
      
    height: 100%;
    flex: 1
  }
  .left {
      
      
    background-color: red;
  }
  .center {
      
      
    background-color: #2A7C7A;
  }
  .right {
      
      
    background-color: olive;
  }
}
</style>

// js部分
data() {
    
    
    return {
    
    
        column: [
            {
    
     title: "姓名", key: "name", align: "center" },
            {
    
     title: "登录名", key: "loginName", align: "center" },
            {
    
     title: "部门", key: "department", align: "center" },
        ],
        tableData: [],
    }
  }

效果如下

此种情况产生的原因是因为：table这个东西，自动拉伸变宽或者变窄的时候，当祖先的flex没有具体的宽度值的时候就会有缓慢变化的诡异情况
解决办法：给table的容器设置宽度
width: 0;
flex-grow: 1;