title: Stop flex child from growing when text contents are too long
body: <p>I have a flex layout which looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/41lW1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/41lW1.png" alt="enter image description here"></a></p>
  
  <p>That's fine but when the product description is very long, I want to hide the overflow and show an ellipsis. </p>
  
  <p>There is a flex container with the class <code>info-container</code> which has 2 flex children - <code>left</code> (30%) and <code>right</code> (70%). The <code>right</code> div is itself a flex container. The problem is this <code>div</code> expands when the text is too long:</p>
  
  <p><a href="https://i.stack.imgur.com/m4fXb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m4fXb.png" alt="enter image description here"></a></p>
  
  <p>The HTML is:</p>
  
  <pre><code>&lt;div class="info-container top"&gt;
    &lt;div class="left"&gt;
      &lt;div class="item-image-container"&gt;
        &lt;div class="item-image" &gt; 
          &lt;img height="75" width="75" src="https://static.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg" /&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="right"&gt;
      &lt;h2&gt;
       header
      &lt;/h2&gt;
  
      &lt;div class="product-description"&gt;
        product desc stuff product desc stuff stuff product desc stuff stuff 
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS is:</p>
  
  <pre><code>.info-container {
        margin-left: 300px;
        display: flex;
        flex: 0 0 100%;
        flex-direction: row;
        justify-content: center;
        padding-bottom: 20px;
        width: 400px;
        border: 1px red solid;
        padding: 3px;
  }
  
  .left {
    font-size: 2.5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 30%;
  }
  
  
  .right {
    flex: 70%;
  }
  
  h2 {
    font-weight: bold;
    min-width:0;
  }
  
  .product-description {
    min-width:0;
    font-sixe: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  h2 {
    margin: 0;
  }
  </code></pre>
  
  <p>The jsfiddle is <a href="https://jsfiddle.net/bky3gk63/2/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>How can I ensure the <code>right div</code> does not expand if the text is too long, and instead an ellipsis is shown?</p>