title: Using text-overflow: ellipsis with flexbox
body: <p>I'm building a shopping cart page and want to list products' image, title, price, and a form element to remove it from the cart.</p>
  
  <p>I've tried using <code>white-space: nowrap;</code>, <code>overflow: hidden;</code>, and <code>text-overflow: ellipsis;</code> together on elements that I want to truncate, but I can't figure out how to display them correctly, especially with <code>img-container</code> and <code>name-price-container</code> using flexbox.</p>
  
  <p>Here's my Django template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      {% for product in products %}
      &lt;li class="row product"&gt;
          &lt;div class="img-container"&gt;
              &lt;a href="{% url 'gallery:product_page' %}?id={{ product.id }}"&gt;
                  &lt;img src="{{ product.image.url }}" alt="{{ product.name }}"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="name-price-container"&gt;
              &lt;span&gt;
                  &lt;a href="{% url 'gallery:product_page' %}?id={{ product.id }}"&gt;{{ product.name }} Loooooooooong Text&lt;/a&gt;
              &lt;/span&gt;
              &lt;span&gt;${{ product.price_per_unit }}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="btn-container"&gt;
              &lt;form method="POST" action="{% url 'gallery:remove_cart' %}"&gt;
                  {% csrf_token %}
                  &lt;input type="hidden" name="id" value="{{ product.id }}"&gt;
                  &lt;input type="submit" class="btn btn-light" value="Remove"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      {% endfor %}
  &lt;/ul&gt;
  </code></pre>
  
  <p>...and the relevant CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.product .img-container {
    background-color: #343a40;
    border: 1px solid #343a40;
    box-sizing: unset;
    height: 128px;
    width: 128px;
    flex: 0 0 auto;
  }
  .product .img-container img {
    display: block;
    max-height: 128px;
    max-width: 128px;
    width: auto;
    height: auto;
  }
  .name-price-container {
    margin: 0 1rem;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .name-price-container a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .btn-container {
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .btn-container .btn {
    margin: 0;
  }
  @media all and (max-width: 768px) {
    body * {
      overflow: hidden;
    }
    .product .img-container {
      height: 64px;
      width: 64px;
    }
    .product .img-container img {
      max-width: 64px;
      max-height: 64px;
    }
  }
  </code></pre>
  
  <p>...and the rendering at 470px width:
  <a href="https://i.imgur.com/UlquZCf.png" rel="nofollow noreferrer">Image here</a></p>
  
  <p>Notice that the first and third results render correctly, but if the text is longer than what fits on the page, instead of being truncated, the form element breaks to a new line.</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>Edit:</strong> Here's the updated <a href="https://jsfiddle.net/mr1p2w3t" rel="nofollow noreferrer">jsfiddle</a> as per Andrei's comment.</p>