9

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?

enter image description here

enter image description here

enter image description here

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.

Community
  • 1
  • 1
jessegavin
  • 74,067
  • 28
  • 136
  • 164
  • 3
    @Milche: those are the "if this question gets a working answer, that'd be awesome and I can use it myself!" votes (because it would be, if it were at all possible without `table` emulation). – David Thomas Nov 21 '13 at 16:25
  • 1
    @MilchePatern it's a good question that I think would benefit others (and myself), and any attempt is so simple and obvious that I think it would be silly to put failed code into it. – m59 Nov 21 '13 at 16:27
  • 2
    Fully related : http://stackoverflow.com/search?q=make+an+inline-block+element+fill+available+space – Milche Patern Nov 21 '13 at 16:40
  • Take a look at the answer here: http://stackoverflow.com/questions/10220142/is-it-possible-for-inline-block-element-to-auto-fill-the-available-width – johnkavanagh Nov 21 '13 at 16:41

2 Answers2

5

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.

Community
  • 1
  • 1
Jordan Gray
  • 16,306
  • 3
  • 53
  • 69
  • You are a king among mortal men! Thanks! Works perfectly! – jessegavin Nov 21 '13 at 17:05
  • @jessegavin Aw, shucks! :) One word of advice, though: support for flexbox is far from perfect! This works like a charm in very modern browsers, but you'll need to add quite a few prefixes and fallbacks before it plays nice in older UAs. – Jordan Gray Nov 21 '13 at 17:11
0

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.

rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • Thanks for this answer. I am seeing some odd behavior when adding additional `` elements. It seems to work really nicely for the exact number of spans you have. – jessegavin Nov 21 '13 at 18:52
  • Yes it does happens ... there are still lots of improvements in order to make it a good solution ... you should go for a lib like http://stackoverflow.com/questions/76996/what-is-the-best-css-grid-framework – rafaelcastrocouto Nov 22 '13 at 13:46
  • Would a CSS framework solve this particular problem? If so, which one? How does it solve it? I use bootstrap, but it doesn't have anything built in which addresses this. – jessegavin Nov 22 '13 at 15:34
  • You could go for http://purecss.io/ ... I never used but seens pretty good ... and it's all just css ... you can't go wrong! – rafaelcastrocouto Nov 25 '13 at 10:58