flex子元素超出宽度后显示...

css如下：

     .ellipsis {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
      }

     .box {
          display: flex;
          width: 300px;
          height: 300px;
          border: 1px solid #000;
     }
     .left {
          border: 1px solid blue;
      }

     .right {
          flex: 1;
     }

左右布局，右侧文字较多

   <div class="box">
        <div class="left">左侧文案</div>
        <div class="right ellipsis">
            右侧很长右侧很长右侧很长右侧很长右侧很长右侧很长右侧很长
        </div>
    </div>

效果如图：

但是右侧元素不直接包裹文本时，不会生效

<div class="box">
        <div class="left">左侧文案</div>
        <div class="right">
           <div class="ellipsis">右侧很长右侧很长右侧很长右侧很长右侧很长右侧很长右侧很长</div>
        </div>
    </div>

如下图，没有生效：

那么怎么处理才能让...效果出现呢？

参考：弹性元素的默认最小宽度为auto

.right元素会被子元素撑大，宽度为子元素的宽度

1. 直接改变默认行为:min-width:0;

2. 写死宽度：width:0;flex:1，会拉伸元素填充剩余宽度

3. 将flex:1元素变为滚动容器，如：添加overflow:hidden/auto; 弹性元素是滚动容器时，min-width视为0