title: Flex child is overflowing the parent container even after setting min-width:0?
body: <p>Child flex item is overflowing the width of the parent container. I tried setting min-width:0 as well but still it is not working.</p>
  <p>Here is my HTML and CSS code :</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>.parent{
    display: flex;
    border: 2px solid red;
  }
  
  .child1{
    background: cyan;
    height: 40px;
    width: 40px;
    flex-shrink: 0;
  }
  
  .child2 {
    background: pink;
    height: 20px;
    width: 20px;
  }
  
  .child3 {
    background: yellow;
    height: 20px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='parent'&gt;
    &lt;div class='child1'&gt;1&lt;/div&gt;
    &lt;div&gt;
      &lt;div class='child2'&gt;2&lt;/div&gt;
      &lt;div class='child3'&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My motive is to prevent the <code>child3</code> from overflowing the parent container and show ellipsis(...) when it overflows.</p>
  <p>Any help is appreciated.</p>