SOURCE

/*
	当使用display:flex的时候，里面flex：1的内容是可以被撑开的。这样用是有问题的
  1.可以在flex：1的地方，加上一个：max-width:100%;
  2.可以在.div2样式上加上min-width:0也可以解决
  至于为什么？不知道
*/

<div class="div1">
  <div class="div2">
    <span>这里是span的内容这里是span的内容这里是span的内容这里是span的内容这里是span的内容
    </span>
  </div>
  <div class="div3">
    
  </div>
</div>

.div1{
  display:flex;
  width:300px;
}
.div2{
  height:40px;
  border:1px red solid;
  flex:1;
  min-width:0;
}
.div3{
  width:100px;
  height:100px;
  background:blue;
  flex:2;
}
span{
  display:inline-block;
  height:100%;
  line-height:24px;
	width:100%;
	overflow:hidden;
	text-overflow: ellipsis;
  white-space:nowrap;
}