title: Text overflow ellipsis on dynamic width element
body: <p>I'm having some issues trying to get <code>text-overflow: ellipsis</code> to work on an element with dynamic width. I've looked into other solutions but all of them seem to use some form of static width, whereas I'm hoping to achieve an entirely dynamic solution. Javascript IS an option but would prefer to keep it to CSS if possible. I also have the constraint of any solution being IE8 compatible. Below is what I have so far.</p>
  <p>The HTML:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;col-1 cell&quot;&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-2 cell&quot;&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Main #1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Main #2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Main #3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Main #4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Main #5&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-3 cell&quot;&gt;
          &lt;div class=&quot;foo&quot;&gt;
              &lt;img src=&quot;http://placehold.it/50x50&quot; alt=&quot;&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;bar&quot;&gt;
              Some overly long title that should be ellipsis
          &lt;/div&gt;
          &lt;div class=&quot;baz&quot;&gt;
              v
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The SCSS:</p>
  <pre><code>.container {
      border: 1px solid #ccc;
      display: table;
      padding: 30px 15px;
      table-layout: fixed;
      width: 100%;
  }
  
  .cell {
      display: table-cell;
      vertical-align: middle;
  }
  
  .col-1 {
      width: 25%;
      
      h1 {
          margin: 0;
          padding: 0;
      }
  }
  
  .col-2 {
      width: 50%;
      
      ul {
          margin: 0;
          padding: 0;
      }
      
      li {
          float: left;
          list-style: none;
          margin-right: 10px;
      }
  }
  
  .col-3 {
      width: 25%;
      
      .foo {
          float: left;
          
          img {
              display: block;
              margin: 0;
              padding: 0;
          }
      }
      
      .bar {
          float: left;
          height: 50px;
          line-height: 50px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
      
      .baz {
          background: #ccc;
          float: left;
          height: 50px;
          line-height: 50px;
          padding: 0 5px;
      }
  }
  </code></pre>
  <p>Ideally, I would like the element with the class of <code>.bar</code> to take up the remaining width of <code>.col-3</code>. Any nudge in the right direction would be greatly appreciated. Here a link to a <a href="https://jsfiddle.net/hwtaq77g/1/" rel="noreferrer">JSFiddle</a> as well.</p>