title: Using flexbox shrink column only if it is wider than half of the container
body: <p>Please look at my drawing:
  <img src="https://i.stack.imgur.com/g3d3M.jpg" alt="enter image description here"></p>
  
  <p>Here is description:<br>
  (1) I have a flexbox with two columns. I want it to work as follows: When one of the boxes bigger than half of the width and there is a space for both boxes, then do nothing. (or stretch both proportionally)</p>
  
  <p>(3) If one of the boxes bigger than half but both boxes don't fit - than shrink only the one that is bigger than half. </p>
  
  <p>(4) If both boxes bigger than half - shrink both proportionally.</p>
  
  <p>This is an example where I want to see this to happen:
  <a href="http://jsbin.com/upArEVI/3/edit" rel="nofollow noreferrer">http://jsbin.com/upArEVI/3/edit</a></p>
  
  <p>Here is how it works in the code example above graphically:
  <img src="https://i.stack.imgur.com/UHyHJ.jpg" alt="enter image description here"></p>
  
  <p>And here is the code:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>With html</p>
  
  <pre><code>&lt;div class="line"&gt;
    &lt;div class="left"&gt;
      something 2 something 3
    &lt;/div&gt;
    &lt;div class="right"&gt;
      something 5
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>