title: Make last item in a list fill the rest of the container
body: <p>I have an inline list with elements of unknown width, and I want the last item to have a different background color than the rest, and take up all the remaining space to the right.  </p>
  
  <p>I'm working with a given HTML and I can't modify it, so I'm looking for a way to use solely CSS (I don't think I can use JS either). I made a <a href="http://jsfiddle.net/AbFZ6/" rel="nofollow">simplified fiddle</a> to show what I need, the background of the last item should go all the way to the end of the browser window (to the right).</p>
  
  <p>As an example, my HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;ul&gt;
          &lt;li&gt;item 1&lt;/li&gt;
          &lt;li&gt;item 2&lt;/li&gt;
          &lt;li&gt;item 3&lt;/li&gt;
          &lt;li class="last"&gt;item 4&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and for the CSS, I tried:</p>
  
  <pre><code>background: linear-gradient(to right, #fff 70%, red 30%);
  </code></pre>
  
  <p>on the div, but since the site has to be responsive, the percentages don't really work like I need, they either don't cover enough or overlap over the preceding item as the screen size changes.</p>
  
  <p>Is there another CSS-way to do this?</p>