Make last element take remaining width with wrapping (and with IE9 support)
<p>I’m looking for a way to align multiple items next to each other, having them wrap once they fill up the line, and the last item take up the remaining width <em>of the last line</em>.</p>

<p>I have found multiple questions on a similar topic before, with solutions generally making the items use <code>float: left</code> to align them on a line, and <code>overflow: hidden</code> on the last element which makes it take up the remaining space automatically. Those solutions work fine in a single line, but they stop working once there are enough items before the last element, that they wrap into multiple lines. Then, the “last” element is still rendered in the first row (if there is enough space), making it no longer be the last element.</p>

<p>However, I want the last element to stay the last element at all times, to have it in the last row—whatever row that is—and automatically take up the remaining space there.</p>

<p>This is pretty simple with a wrapping flexbox, since you just need to put <code>flex: 0 auto</code> on the former items to make them take up whatever space they need (without taking more), and <code>flex: 1</code> on the last element to make it take up the remainder. <strong><em>However, I need to support Internet Explorer 9, so flexbox is unfortunately out of the question.</em></strong></p>

<p>This is how the situation looks like. When running the snippet, you can use the “Toggle flex box” button to toggle flexbox mode which shows the way it <em>should</em> look like.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* { box-sizing: border-box; }
.container {
  width: 300px;
  background: snow;
  padding: 5px;
  overflow: auto;
}
.element {
  float: left;
  margin: 2px 5px 2px 0;
  background: lavender;
}
.last {
  overflow: hidden;
}
.last &gt; input {
  width: 100%;
}

/* Working solution with flex box */
.flex .container {
  display: flex;
  flex-wrap: wrap;
}
.flex .element {
  flex: 0 auto;
}
.flex .last {
  flex: 1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="element"&gt;Foo&lt;/div&gt;
  &lt;div class="element"&gt;Foo bar&lt;/div&gt;
  &lt;div class="element"&gt;Foo bar baz&lt;/div&gt;

  &lt;div class="last"&gt;&lt;input type="text" /&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="container"&gt;
  &lt;div class="element"&gt;Foo&lt;/div&gt;
  &lt;div class="element"&gt;Foo bar&lt;/div&gt;
  &lt;div class="element"&gt;Foo bar baz&lt;/div&gt;
  &lt;div class="element"&gt;Foo&lt;/div&gt;
  &lt;div class="element"&gt;Foo bar&lt;/div&gt;
  &lt;div class="element"&gt;Foo bar baz&lt;/div&gt;

  &lt;div class="last"&gt;&lt;input type="text" /&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;button onclick="this.parentNode.classList.toggle('flex')"&gt;Toggle flex box&lt;/button&gt;</code></pre>
</div>
</div>
</p>