关于弹性盒子的避坑(弹性盒子内容溢出)

关于弹性盒子的避坑

今天在写公司业务的时候发现一个非常坑的一个地方，父盒子的宽度采用的是100%，里面采用左右布局，左侧固定宽度，右侧flex1撑满，但是发现右侧总是会溢出右侧父盒子，一直找不到问题所在。
如下图：

这个问题找了好久，但是不管怎么处理，右侧盒子总是会溢出，开始以为是右侧element-ui的表格的宽度的问题，但是调整了还是不行。
有问题的代码：

.inner {
  display: flex;
  width:100%;
  height: 100%;

  .left {
    width: 304px;
    padding: 32px;
    height: 100%;
    border-right: 1px solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .select {
      margin-bottom: 20px;
    }

    .add_brand_btn {
      background-color: #0052D9;
      color: #fff
    }
  }

  .right {
    padding: 32px;
    height: 100%;
    // width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .table{
      width: 100%;
    }
  }
}

然后去网上找了好多贴子，尝试了很多种关键词搜索，最后采用关键词，弹性盒子内用溢出，搜到了一个解决方案。灵感链接
最后给右侧盒子添加一个宽度即可。

.inner {
  display: flex;
  height: 100%;

  .left {
    width: 304px;
    padding: 32px;
    height: 100%;
    border-right: 1px solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .select {
      margin-bottom: 20px;
    }

    .add_brand_btn {
      background-color: #0052D9;
      color: #fff
    }
  }

  .right {
    padding: 32px;
    height: 100%;
    // width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    width: 300px;
    .table{
      // flex: 1;
      width: 100%;
    }
  }
}

完美解决：