flex结合ellipsis实现同行元素同时自适应与优先自适应

遇到过这样的需求，

html代码：

<p class="p">
    <span class="price">建议零售1000元整</span>
    <span class="text">条形码：23543654765876900000</span>
  </p>

css代码：

.p{
	  width:300px;
      white-space:nowrap;
      display: flex;
    }
    .price{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      flex:1;
    }
    .text{
      flex:1;
    }

两个宽度都自适应，但是因为前面加了溢出处理，后面的会优先自适应
这样就实现了，优先后面自适应，并确保后面完整显示的纯css实现