仅当Flexbox收缩柱宽于容器的一半时才使用它

Question

请看我的图纸：

以下是说明：
（1）我有一个带有两列的flexbox。我希望它的工作方式如下：当其中一个方框大于宽度的一半并且两个方框都有空间时，则不执行任何操作。 （或按比例拉伸）

（3）如果其中一个大于一半的盒子但两个盒子都不合适 - 只收缩大于一半的盒子。

（4）如果两个盒子都大于一半 - 按比例收缩。

这是一个我希望看到这种情况发生的例子： http://jsbin.com/upArEVI/3/edit

以下是图形化代码示例中的工作原理：

以下是代码：

body{
  width: 100%;
  padding:0;
  margin:0;
  background: white;
}
.line{
  display: flex;
  height: 50px;
  border-top:1px solid lightgray;
  border-bottom:1px solid lightgray;
}
.left, .right{
  flex: 0 1 auto;
  overflow:hidden;
  text-overflow: ellipsis;
  background: rgba(0,200,0,0.1);
  white-space: nowrap;
  border-right:2px solid black;
}
.right{
  text-align: right;
  flex: 1 1 auto;
  background: rgba(0,0,200,0.1);
}
.middle{
  position: absolute;
  top:0;
  width:50%;
  height: 100%;
  border-right:2px dotted red;
}

使用html

<div class="line">
  <div class="left">
    something 2 something 3
  </div>
  <div class="right">
    something 5
  </div>
</div>

Answer 1

看看这是否是您正在寻找的：

* {
  padding:0;
  margin:0;
}
.line{
  display: flex;
  height: 50px;
  border-top:1px solid lightgray;
  border-bottom:1px solid lightgray;
}
.left, .right{
  flex: 1 auto;
  text-overflow: ellipsis;
  background: rgba(0,200,0,0.1);
  border-left:1px solid lightgray;
  border-right:1px solid lightgray;
  overflow: hidden;
  white-space: nowrap;
}
.right{
  text-align: right;
  background: rgba(0,0,200,0.1);
}

<div class="line">
  <div class="left">
    something 2 something 3 something 4
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>
<div class="line">
  <div class="left">
    something 2 something 3 something 4 something 4 
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>
<div class="line">
  <div class="left">
    something 2 something 3 something 4 something 4 something 4  
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>

并here's a link查看工作模式。