How to make last element in a series of wrapped inline-block elements fill the available horizontal space? - css

Question

I have an element which will contain an unspecified number of inline-block elements which may wrap if there are enough elements.
I want the last element to fill the remaining space on the line. How can this be accomplished?
Example HTML
<div class="tags">
<span class="tags__item">First Tag</span>
<span class="tags__item">Another One</span>
<span class="tags__item">Long Tag Name Here</span>
<span class="tags__item">Last tag should fill</span>
</div>
Example CSS
.tags { border: solid 1px #000; padding: 0; }
.tags__item {
display: inline-block;
margin: 2px;
padding: 1px 5px;
background: #eee;
border: solid 1px #eee;
}
.tags__item:last-child {
background: #fff;
border: dashed 1px #eee;
}
Attempt #1 (doesn't work)
One answer (which was deleted) mentioned trying table-cell layout like this..
.tags {
border: solid 1px #000;
display: table-row;
white-space: nowrap;
}
.tags__item {
display:table-cell;
width:auto;
margin: 2px;
padding: 1px 5px;
background: #eee;
}
.tags__item:last-child {
background: #fff;
border: dashed 1px #ccc;
width:99%
}
This solution works reasonably well for a single line. However, it doesn't allow wrapping. http://cdpn.io/omFuy
Attempt #2 (doesn't work)
Someone else linked to another SO answer as a possible solution.
.tags {
border: solid 1px #000;
}
.tags__item {
display: block;
float: left;
margin: 2px;
padding: 1px 5px;
background: #eee;
}
.tags__item:last-child {
float: none;
display: block;
border: dashed 1px #ccc;
background: #fff;
}
.tags__item:last-child::after {
clear:both;
}
But it doesn't work. See my implementation.

Answer 1

For browsers that support it, the natural solution is to use the flexible layout module, aka flexbox—this is exactly the sort of scenario it is intended for. Here are the bare essentials:
Demo on Dabblet
.tags {
display: flex;
flex-wrap: wrap;
}
.tags__item:last-child {
flex: auto;
}
The (not insignificant) downside to this approach is the lack of browser support and the attendant mess of prefixes and fallbacks if you need to support older browsers. As suggested by Rafael in the comments, this CSS Tricks article outlines the required prefixes and the legacy syntax.

Answer 2

Definitely not the best solution ... but I just did not resisted to try a javascript solution.
http://codepen.io/rafaelcastrocouto/pen/morlb
Still need to check for "line-breaks", but it can be useful since jQuery probably turns this cross browser.