css - 仅当它比容器的一半宽时才使用 flexbox 收缩列

Question

请看我的图：

这是描述：
（1）我有一个包含两列的弹性框。我希望它按如下方式工作：当其中一个框大于宽度的一半并且两个框都有空间时，什么也不做。（或按比例拉伸两者）

(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>

这是查看工作模型的链接。