title: Shrink-to-fit menu items - first item grows
body: <p>Let's say I have a menu of a pre-specified width.</p>
  
  <p>I want each menu item to shrink-to-fit with its contents, with the exception of ONE, which then fills up the remaining space in the menu.</p>
  
  <p>Like this:</p>
  
  <hr>
  
  <pre><code>                                                       Fill | item | item | item
  </code></pre>
  
  <hr>
  
  <p>So far the closest I've come to achieving this effect is by using <code>display:table-cell</code> in the css code for each menu item. But the problem is unless I define a width for the item's, they all expand to take up the same amount of width in the table.</p>
  
  <hr>
  
  <pre><code>      Fill      |      item      |      item      |      item      |      item
  </code></pre>
  
  <hr>
  
  <p>Is there any way to have the item spaces shrink to fit the item and have the fill item just fill up the rest of the div?</p>