title: Flex layout: show first element when two child elements are in the same row
body: <p>I have this simple template:</p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer {
    display: flex;
    width: 200px;
  }
  
  .inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="left inner"&gt;The quick brown fox&lt;/div&gt;
    &lt;div class="right inner"&gt;jumps over the lazy dog&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The displayed result looks like <code>The quick b... jumps over th...</code></p>
  
  <p>How could I make it try to fully display the first element before putting in the second one? If there's not enough space for the first part, simply drop the second one.</p>
  
  <p>It should look something like <code>The quick brown fo...</code></p>
  
  <p>Thanks!</p>