title: text-overflow: ellipsis not working on nested flex container
body: <p>I'm aware of these posts:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/43809612/prevent-a-child-element-from-overflowing-its-parent-in-flexbox">Prevent a child element from overflowing its parent in flexbox</a></li>
  <li><a href="https://stackoverflow.com/questions/45813304/text-overflow-ellipsis-on-flex-child-not-working">text-overflow ellipsis on flex child not working</a></li>
  <li><a href="https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size">Why don't flex items shrink past content size?</a></li>
  </ul>
  
  <p>No answer from there fixes the issue I have in the code snippet below. Here's the html tree:</p>
  
  <ul>
  <li>parent flex column
  
  <ul>
  <li>child flex row
  
  <ul>
  <li>label flex (so I can align text vertically)</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>The only way I could make it work is by making the label an <code>inline-block</code>, but I'd really like to keep the flex.</p>
  
  <p>What I'd already done:</p>
  
  <ul>
  <li>On the child:
  
  <ul>
  <li>Set <code>white-space: nowrap</code></li>
  <li>Set <code>min-width: 0</code></li>
  <li>Set <code>overflow: hidden</code></li>
  </ul></li>
  <li>On the parent
  
  <ul>
  <li>Set <code>min-width: 0</code></li>
  </ul></li>
  <li>Permutate the options above with <code>flex-grow: 1</code> and <code>max-width: 100%</code></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/QMUQa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QMUQa.png" alt="Screen Capture"></a></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-container {
    align-items: stretch;
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
  }
  
  .item-container {
    border: 1px solid #ebf0ff;
    border-radius: 0.25rem;
    display: flex;
    flex-flow: row nowrap;
    height: 3.25rem;
    margin: 0.5rem 1rem;
    padding: 0.5rem 1rem;
  }
  
  .label {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    font-family: sans-serif;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  &lt;body&gt;
    &lt;div class="parent-container"&gt;
      &lt;div class="item-container"&gt;
        &lt;span class="label"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>