title: `white-space: nowrap` inside flex container only grows to width of text as if it were wrapped
body: <p>I am trying to implement a flexbox layout that works as follows:</p>
  <ul>
  <li><p>A flexbox container with <code>flex-direction: row</code> contains two children.</p>
  </li>
  <li><p>The parent should only be as big as it needs to to accommodate the children (achieved via <code>display: inline-flex</code>).</p>
  </li>
  <li><p>The children contain text of different lengths, which does not wrap (i.e. all on one line).</p>
  </li>
  <li><p><strong>The children should be exactly the same width, which is the width of the widest of the two texts.</strong> This is very important, and precludes the usage of <code>flex-basis: auto</code>, because that will cause the length of the two texts to vary rather than being exactly the same.</p>
  </li>
  </ul>
  <p>In order to make the children the exact same width, determined by the largest of the two, I am using <code>flex: 1 0 0px</code>.</p>
  <p>The layout works exactly as expected, except that the text only seems to grow to the width <em>as if it didn't have <code>white-space: nowrap</code></em>! The following screenshot from <a href="https://codepen.io/mamackenzie/pen/OJpxxjm" rel="nofollow noreferrer">this codepen that I've created</a> illustrates the problem:</p>
  <p><a href="https://i.stack.imgur.com/WkdCp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WkdCp.png" alt="Showing what happens with and without white-space: nowrap" /></a></p>
  <p>Is there any way to implement this exact behaviour without line wrapping? I know that I can do something like add a fixed width, but I want to know if this is possible to implement dynamically (always growing to exactly the correct width of arbitrary text) using flexbox.</p>
  <p>Thanks</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    display: inline-flex;
    margin-bottom: 60px;
  }
  
  .child {
    flex: 1 0 0px;
    padding: 20px;
  }
  
  .nowrap {
    white-space: nowrap;
    overflow: hidden;
  }
  
  .left {
    background-color: #89e7dc;
  }
  
  .right {
    background-color: #e7cc89;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;In the first example, when the text is allowed to wrap, we see that the two sides grow correctly to the same width as the larger text&lt;/p&gt;
  &lt;div class="parent"&gt;
    &lt;div class="child left"&gt;This is some short text&lt;/div&gt;
    &lt;div class="child right"&gt;This is some long text that is intended to cause the previous child to grow to the width of this one&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;In the second example, where the text is forced onto a single line by
    &lt;pre&gt;white-space: nowrap; overflow: hidden;&lt;/pre&gt; we see that the boundaries grow to the size that the wrapped text would occupy, even though it's all on one line.&lt;/p&gt;
  &lt;div class="parent"&gt;
    &lt;div class="child left nowrap"&gt;This is some short text&lt;/div&gt;
    &lt;div class="child right nowrap"&gt;This is some long text that is intended to cause the previous child to grow to the width of this one&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;
    How can we get the same behaviour as the first example (both sides growing to exactly the size of the larger content) while keeping the text on the same line?
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>