title: Fill remaining width inside parent that is also filling remaining width
body: <p>I have a fixed-size navbar (using <a href="http://getbootstrap.com/" rel="nofollow">Bootstrap</a>) that contains four divs. These divs contain a logo, some links/dropdowns and a search box:</p>
  
  <pre><code>┌────────────────────────────navbar (fixed-size)──────────────────────────────┐
  │┌───logo───┐┌───dropdown───┐┌───────────links──────────┐┌────search box─────┐│
  ││fixed-size││  fixed-size  ││      variable width      ││  fill remaining   ││
  │└──────────┘└──────────────┘└──────────────────────────┘└───────────────────┘│
  └─────────────────────────────────────────────────────────────────────────────┘
  </code></pre>
  
  <p>I want the search box (the box on the far right) to fill the remaining space in the container. The search box comprises an input and a button:</p>
  
  <pre><code>┌─────────────────────────────────┐
  │┌─────────────────────┐┌────────┐│
  ││        &lt;input&gt;      ││&lt;button&gt;││
  │└─────────────────────┘└────────┘│
  └─────────────────────────────────┘
  </code></pre>
  
  <p>The button has a fixed size but I want the input to scale horizontally, stretching the search box to fill its parent (the nav-bar).</p>
  
  <p><strong>Edit:</strong> To clarify, I want the search box to take up the (horizontal) space left over from when it's siblings (logo, dropdown and links) have taken up their space. Since the search box is made out of an input and a button and the button will have a fixed width, I want the input to expand and push the search box's boundaries until the search box fills the space it's siblings left in the navbar</p>