0

I have a wrapping 100%-wide flexbox with a dynamic number of items of dynamic size. This is an example of what it may look like:

enter image description here

.container {
  display: flex;
  flex-wrap: wrap;
  width: 350px;
  gap: 0.75rem;
}

.container > div {
  background: teal;
  color: #f8f8f8;
  font-family: sans-serif;
  display: inline-block;
  padding: .25em .4em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  border-radius: .25rem;
}
<div class="container">
  <div>Lorem ipsum</div>
  <div>dolor sit amet</div>
  <div>consectetur adipiscing elit</div>
  <div>sed do eiusmod</div>
  <div>tempor incididunt</div>
  <div>ut labore</div>
  <div>et dolore</div>
</div>

I want the last item (or "column") in each row to expand its width to fill the remaining empty space in that row. The result should look like this:

enter image description here

.container {
  display: flex;
  flex-wrap: wrap;
  width: 350px;
  gap: 0.75rem;
}

.container > div {
  background: teal;
  color: #f8f8f8;
  font-family: sans-serif;
  display: inline-block;
  padding: .25em .4em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  border-radius: .25rem;
}
<div class="container">
  <div>Lorem ipsum</div>
  <div style="flex-grow:1">dolor sit amet</div>
  <div style="flex-grow:1">consectetur adipiscing elit</div>
  <div>sed do eiusmod</div>
  <div style="flex-grow:1">tempor incididunt</div>
  <div>ut labore</div>
  <div style="flex-grow:1">et dolore</div>
</div>

Is there a way to achieve this with pure CSS? Please note that the number of items is dynamic, as well as their width and the overall width of the container. The solution does not necessarily have to involve a flexbox. A grid-based approach or something else would also be fine.

Edit for clarification in response to Johannes' answer (which now doesn't exist anymore): I do not know in advance which item is going to be the last one in each row because that depends on the number of items, the width of each item, and the width of the container, all of which I do not know in advance. Therefore adding flex-grow:1 to particular items is not possible.

hBGl
  • 274
  • 2
  • 10
  • Does this answer your question? [Targeting flex items on the last or specific row](https://stackoverflow.com/questions/42176419/targeting-flex-items-on-the-last-or-specific-row) – Felipe Saldanha Sep 16 '21 at 23:43
  • @FelipeSaldanha The question you linked is about having a container with items of dynamic but also uniform width. Afaik, it does not apply to the question at hand which is about filling empty space in a container by enlarging particular items. – hBGl Sep 17 '21 at 01:09
  • There it says: "Unfortunately, in the current iteration of flexbox (Level 1), there is no clean way to solve the last-row alignment problem." So I don't see how to answer your question with pure CSS. – Felipe Saldanha Sep 17 '21 at 02:02
  • @FelipeSaldanha The solution does not need to be based on flexbox. It might be possible to solve it with a grid. But after doing a fair amount of research online, I don't have my hopes up. – hBGl Sep 17 '21 at 11:36
  • CSS Grid wouldn't apply here either, as the width of each item is dynamic. In a grid, all items in a column will have the same width unless you declare otherwise in advance. – Felipe Saldanha Sep 17 '21 at 15:06

0 Answers0