title: Change justify-content value when flex items overflow container
body: <p>Look at following fiddle <a href="https://jsfiddle.net/27x7rvx6" rel="noreferrer">https://jsfiddle.net/27x7rvx6</a></p>
  
  <p>The CSS (<code>#test</code> is flexbox container, and <code>.items</code> are its children):</p>
  
  <pre><code>#test {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 300px;
    margin-left: 150px;
    border: 2px solid red;  
  }
  .item {
    flex: 0 0 70px;
    margin-right: 10px;
    background: blue;
    height: 70px;
    border: 2px solid black;
  }
  </code></pre>
  
  <p>There is a one line (<code>nowrap</code>) flexbox with fixed size items. The container has <code>justify-content</code> set to <code>center</code>. Because the items can't shrink and are together wider than the container they start to overflow. </p>
  
  <p>My problem is that the content overflows both to the left and to the right. Is there a way to make the content justified to center but once it starts to overflow make it act like the <code>justify-content</code> property is set to <code>flex-start</code>, resp. make it overflow only to right of the container?</p>